我想使用线性渐变动态地部分填充来自反应图标的 Font Awesome Star。我已经尝试过以下方法:
具有内联样式的 React 组件- 将父跨度的背景设置为渐变并使 SVG 透明。似乎无法将 SVG 星形周围的边框设置为 #FFFFFF,因此我看到了父跨度的整个背景。见下文:
import React from 'react'
import FaStar from 'react-icons/lib/fa/star'
const Stars = () => {
const inlineStyle = (pctFill) => {
return(
{background: 'linear-gradient(90deg, #134758 '+pctFill+'%, #d3d3d3 '+pctFill+'%)'}
)
}
return(
<div>
<span style={inlineStyle(50)}>
<FaStar />
</span>
</div>
)
}
export default Stars
我还尝试创建一个 LinearGradient 组件并设置路径的 fill="url(#component)",但react-icons 路径是我父级跨度的第三个子级,我不知道如何访问。
请帮忙
遇到了同样的问题,这是一个简单的工作解决方案:
-
将包裹 元素的
-
给添加id
-
通过“url()”将渐变链接到图标的“描边”属性:
import { FiCheck } from 'react-icons/fi';
//...
<svg width="0" height="0">
<linearGradient id="blue-gradient" x1="100%" y1="100%" x2="0%" y2="0%">
<stop stopColor="#7a6ded" offset="0%" />
<stop stopColor="#591885" offset="100%" />
</linearGradient>
</svg>
<FiCheck style={{ stroke: "url(#blue-gradient)" }} />
obs:在某些包中,您可能需要将“行程”切换为“填充”。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)