【发布时间】：2021-04-07 19:58:43
【问题描述】：
所以我有一个 SVG 组件，它使用如下所示的颜色渐变呈现弧线。目前，它只是弧线，但没有灰点。我想要做的是以编程方式将值传递到组件中，以便随着传递到组件中的值变得更高，灰点沿弧线移动。我该怎么做？
function SvgComponent(props) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={321}
height={161}
viewBox="0 0 321 161"
fill="none"
{...props}
>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M230.036 39.195l10-17.32A160 160 0 01298.6 80.439l-17.321 10a139.984 139.984 0 00-51.243-51.244z"
fill="url(#prefix__paint0_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M281.279 90.439a139.997 139.997 0 0118.757 70h20a160 160 0 00-21.436-80l-17.321 10z"
fill="url(#prefix__paint1_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M240.036 21.875a160 160 0 00-80-21.436v20a139.994 139.994 0 0170 18.756l10-17.32z"
fill="url(#prefix__paint2_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M160.036.439a160.001 160.001 0 00-80 21.436l10 17.32a140.003 140.003 0 0170-18.756v-20z"
fill="url(#prefix__paint3_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M38.792 90.439l-17.32-10a160 160 0 0158.564-58.564l10 17.32A139.998 139.998 0 0038.792 90.44z"
fill="url(#prefix__paint4_linear)"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M20.041 160.441a139.994 139.994 0 0118.757-70l-17.32-10a159.998 159.998 0 00-21.437 80h20z"
fill="url(#prefix__paint5_linear)"
/>
<Defs>
<LinearGradient
id="prefix__paint0_linear"
x1={291.5}
y1={79}
x2={287.596}
y2={26.447}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#863030" />
<Stop offset={1} stopColor="#862BB0" />
</LinearGradient>
<LinearGradient
id="prefix__paint1_linear"
x1={294}
y1={89.5}
x2={326.552}
y2={147.819}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#863030" />
<Stop offset={1} stopColor="#481717" />
</LinearGradient>
<LinearGradient
id="prefix__paint2_linear"
x1={240}
y1={31.5}
x2={180.5}
y2={9.5}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#862BB0" />
<Stop offset={1} stopColor="#D12020" />
</LinearGradient>
<LinearGradient
id="prefix__paint3_linear"
x1={89}
y1={26.5}
x2={156}
y2={12.5}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#DB7326" />
<Stop offset={1} stopColor="#D12020" />
</LinearGradient>
<LinearGradient
id="prefix__paint4_linear"
x1={73}
y1={35.5}
x2={24.5}
y2={90}
gradientUnits="userSpaceOnUse"
>
<Stop offset={0.004} stopColor="#DB7326" />
<Stop offset={0.8} stopColor="#EFC02E" />
</LinearGradient>
<LinearGradient
id="prefix__paint5_linear"
x1={29}
y1={90}
x2={10.992}
y2={160.377}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#EFC02E" />
<Stop offset={0.924} stopColor="#3E7821" />
</LinearGradient>
</Defs>
</Svg>
)
}
export default SvgComponent
弧线是使用 SVGR（一种将 SVG 转换为 React 组件的工具）制作的。
【问题讨论】：
标签： react-native expo react-native-svg