如何在 svg 圆圈内渲染 n 个切片？

Question

我正在开发 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>

Answer 1

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}'

如何在 svg 圆圈内渲染 n 个切片？

How to render n slices inside svg circle?

javascript

svg

path

reactjs