如何在渐变弧上渲染一个点？

时间：2021-04-07 19:58:43

标签： react-native expo react-native-svg

所以我有一个 SVG 组件，它渲染一个带有颜色渐变的弧，如下所示。目前，它只是圆弧，没有灰点。我想要做的是以编程方式将值传递到组件中，以便随着传递到组件中的值变高，灰点沿着弧线移动。我该怎么做？

The arc with a dot.

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 组件的工具）制作的。

1 个答案:

答案 0 :(得分：0)

您可以尝试将其添加为 Svg 组件中的子项

       <Svg
          xmlns="http://www.w3.org/2000/svg"
          width={321}
          height={161}
          viewBox="0 0 321 161"
          fill="none"
        >
          <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)"
          />
          <Circle
            cx="50%"
            cy={10}
            r={thickness}
            stroke="none"
            fill="#fff"
            transform={`rotate(${(target / 100) * 180},${321 / 2},${321 / 2})`}
          />
          <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>

我为白色圆圈添加了这个

<Circle
  cx="50%"
  cy={10}
  r={thickness}
  stroke="none"
  fill="#fff"
  transform={`rotate(${(target / 100) * 180},${321 / 2},${321 / 2})`}
/>

target 应该是 -50 和 50 之间的任何值，50 是最大值。

相关问题
最新问题