LinearGradientを置き換えて、同じ描画された領域をすべて保持するために使用できるSVG要素は何ですか？

Question

私は現在react-native-circular-sliderの修正版で作業しています。ダイヤルホイールに使用されているLinearGradientを、フラットな色と透明度を適用するだけのものに置き換えることを検討しています。

私はSVGに精通していません。私はすでにLineとCircleを入れてみましたが、動作しないようです。

ホイール走るコードスニペット：

<Defs> 
     { 
      range(segments).map(i => { 
      const { fromX, fromY, toX, toY } = calculateArcCircle(i, segments, radius, startAngle, angleLength); 
      const { fromColor, toColor } = calculateArcColor(i, segments, gradientColorFrom, gradientColorTo) 
      return (
       <LinearGradient key={i} id={getGradientId(i)} x1={fromX.toFixed(2)} y1={fromY.toFixed(2)} x2={toX.toFixed(2)} y2={toY.toFixed(2)}> 
       <Stop offset="0%" stopColor={toColor} /> 
       <Stop offset="1" stopColor={toColor} /> 
       </LinearGradient> 
      ) 
      }) 
     } 
</Defs> 

セグメントはちょうど私がfromXを接続しようとしているように5や10などの数、 だろう - ラインに>おもちゃ、それは私のために働くのdidntは（可能性は、ちょうど間違っている）どんな助けもありがとう。

Answer 1

私は解決策を見つけました。それは非常に簡単でした。私はパスを使用し、線形グラジエントと同じ方法でそれを繰り返しました。

（不透明度及び色の調整を伴う）コードサンプル：

range(segments).map(i => { 
      const { fromX, fromY, toX, toY } = calculateArcCircle(i, segments, radius, startAngle, angleLength); 
      const d = `M ${fromX.toFixed(2)} ${fromY.toFixed(2)} A ${radius} ${radius} 0 0 1 ${toX.toFixed(2)} ${toY.toFixed(2)}`; 

      return (
       <Path 
       d={d} 
       key={i} 
       strokeWidth={strokeWidth} 
       stroke={"#133954"} // used to be `url(#${getGradientId(i)})` 
       strokeOpacity={.7} 
       fill="transparent" 
       /> 
      ) 
      })