Question

我想创建一个饼图，表示8/8整体进度，4/8表示一半。我已经设法创建一个，但似乎它开始于90度角。我希望它从0度开始。我不想使用旋转，因为它内部有文本

这是我到目前为止所拥有的

＆＃13;

.pie-assign {
  border-radius: 50%;
}

.pie-assign circle {
  fill: yellow;
  stroke: red;
  stroke-width: 30;
}

.circle-0 { stroke-dasharray: 0 100; }
.circle-1 { stroke-dasharray: 12.5 150; }
.circle-2 { stroke-dasharray: 25 100; }
.circle-3 { stroke-dasharray: 37.5 100; }
.circle-4 { stroke-dasharray: 50 100; }
.circle-5 { stroke-dasharray: 62.5 100; }
.circle-6 { stroke-dasharray: 75 100; }
.circle-7 { stroke-dasharray: 87.5 100; }
.circle-8 { stroke-dasharray: 105 100; }

＆＃13;

<div style="width:100px; height: 100px;">
<svg class="pie-assign" viewBox="0 0 30 30">
  <circle class="circle-1" r="15" cx="15" cy="15" />
  <text x="50%" y="50%" text-anchor="middle" fill="gray" dy=".3em">A</text>
</svg>
</div>

＆＃13;

任何帮助将不胜感激。

Answer 1

您可以在不旋转文字内容的情况下使用旋转。

例如，您可以将其应用于<circle>元素：

<circle r="15" cx="15" cy="15" transform="rotate(45,15,15)" />

第一个值是以度为单位的旋转。第二个和第三个值是旋转中心的坐标。

使用SVG的饼图

1 个答案: