如何在svg圓內渲染n個切片？

我正在開發一個reactJS應用程式。

我需要渲染一個svg circle，當我點擊它時，它會在里面生成 n 個相等的切片。

我創建了切片，這是代碼

renderSlices = () => {
    let slices = [];

    const numberOfSlice = 12; //number of slices

    for (let i = 0; i < numberOfSlice; i  ) {
      slices.push({ percent: 1 / numberOfSlice, color: 'gray' });
    }

    let cumulativePercent = 0;

    let arr = [];
    arr = slices.map(slice => {
      const [startX, startY] = this.getCoordinatesForPercent(cumulativePercent.toString());
      cumulativePercent  = slice.percent;
      const [endX, endY] = this.getCoordinatesForPercent(cumulativePercent.toString());
      const largeArcFlag = slice.percent > 0.5 ? 1 : 0;
      const pathData = [
        `M ${startX} ${startY}`, // Move
        `A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
        'L 0 0', // Line
      ].join(' ');
      return <path d={pathData} fill={slice.color} key={pathData} />;
    });
    return arr;
  }

  getCoordinatesForPercent(percent: string) {
    const x = Math.cos(2 * Math.PI * parseFloat(percent));
    const y = Math.sin(2 * Math.PI * parseFloat(percent));
    return [x, y];
  } 

渲染方法：

<div className="container">
              <svg
                height="306"
                width="306"
                viewBox="-1 -1 2 2"
              >
                {/* <circle cx="150" cy="150" r="148" stroke="black"
                  strokeWidth="2" fill={"transparent"}/> */}
                {this.renderSlices()}
              </svg>
            </div>

問題是當我從圓標記中洗掉評論并洗掉 時viewBox，只顯示圓，而當我評論圓標記并放置 時viewBox，只顯示切片。

我想讓圓圈帶有可見的筆劃，里面有切片。

請問有什么幫助嗎？

編輯：

<svg height="306" width="306" viewBox="0 0 306 306">
    <path d="M 1 0 A 1 1 0 0 1 0.8660254037844387 0.49999999999999994 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
    <path d="M 0.8660254037844387 0.49999999999999994 A 1 1 0 0 1 0.5000000000000001 0.8660254037844386 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
    <path d="M 0.5000000000000001 0.8660254037844386 A 1 1 0 0 1 6.123233995736766e-17 1 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
    <path d="M 6.123233995736766e-17 1 A 1 1 0 0 1 -0.4999999999999998 0.8660254037844387 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
    <path d="M -0.4999999999999998 0.8660254037844387 A 1 1 0 0 1 -0.8660254037844385 0.5000000000000003 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
    <path d="M -0.8660254037844385 0.5000000000000003 A 1 1 0 0 1 -1 5.66553889764798e-16 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
    <path d="M -1 5.66553889764798e-16 A 1 1 0 0 1 -0.866025403784439 -0.4999999999999994 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
    <path d="M -0.866025403784439 -0.4999999999999994 A 1 1 0 0 1 -0.5000000000000004 -0.8660254037844385 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
    <path d="M -0.5000000000000004 -0.8660254037844385 A 1 1 0 0 1 -1.8369701987210297e-16 -1 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
    <path d="M -1.8369701987210297e-16 -1 A 1 1 0 0 1 0.5000000000000001 -0.8660254037844386 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
    <path d="M 0.5000000000000001 -0.8660254037844386 A 1 1 0 0 1 0.8660254037844388 -0.49999999999999967 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
    <path d="M 0.8660254037844388 -0.49999999999999967 A 1 1 0 0 1 1 -2.4492935982947064e-16 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
</svg>

uj5u.com熱心網友回復：

getCoordinatesForPercent(percent: string, radius: number, circle: {x: number, y: number}) {
    const x = radius * Math.cos(2 * Math.PI * parseFloat(percent))   circle.x;
    const y = radius * Math.sin(2 * Math.PI * parseFloat(percent))   circle.y;
    return [x, y];
} 

乘以radius并添加圓坐標

并更改A 1 1 0 ${largeArcFlag}到A ${radius} ${radius} 0 ${largeArcFlag}和'L 0 0'到'L ${circle.x} ${circle.y}'

標籤：javascript 反应 svg 小路

上一篇：物件HTML標記上的Onclick事件不起作用，解決方法？

下一篇：如何在懸停時更改svg填充