我有3个svg甜甜圈图，每个图都有一条用stroke-dasharray创建的线，这些图加起来总计为100％。
我希望每个图表从最后一个图表结束的地方开始，因此第一张图表的范围是0-60％。我希望第二张图表从60％开始至90％，最后一张图表从90％至100％开始
我正在尝试使用笔划dashoffset来做到这一点，但是我无法弄清楚它是如何工作的。
<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="green"
stroke-width="3"
stroke-dasharray="60 40"
stroke-dashoffset="25"></circle>
</svg>
<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<circle class="donut"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="red"
stroke-width="3"
stroke-dasharray="30 70"
stroke-dashoffset="60"></circle>
</svg>
<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<circle class="donut"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="grey"
stroke-width="3"
stroke-dasharray="10 90"
stroke-dashoffset="-"></circle>
</svg>
答案 0 :(得分：1)
第一个图表从0-60％=> 60％偏移0％：
stroke-dasharray="60 40"
stroke-dashoffset="0"
第二张图表从60％开始并达到90％=> 30％抵消60％：
stroke-dasharray="30 70"
stroke-dashoffset="-60"
最终图表从90％到100％开始=> 10％抵消90％：
stroke-dasharray="10 90"
stroke-dashoffset="-90"
<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!-- first chart is from 0-60% => 60% offset 0% -->
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="green" stroke-width="3"
stroke-dasharray="60 40"
stroke-dashoffset="0"
></circle>
</svg>
<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!-- second chart to start at 60% and go to 90% => 30% offset 60% -->
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="red" stroke-width="3"
stroke-dasharray="30 70"
stroke-dashoffset="-60"
></circle>
</svg>
<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!-- final chart to start at 90% to 100% => 10% offset 90% -->
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="grey" stroke-width="3"
stroke-dasharray="10 90"
stroke-dashoffset="-90"
></circle>
</svg>
<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!-- all charts -->
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="green" stroke-width="3"
stroke-dasharray="60 40"
stroke-dashoffset="0"
></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="red" stroke-width="3"
stroke-dasharray="30 70"
stroke-dashoffset="-60"
></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="grey" stroke-width="3"
stroke-dasharray="10 90"
stroke-dashoffset="-90"
></circle>
</svg>
答案 1 :(得分：1)
半径r ="15.91的圆周等于
2 * 3.1415 * 15.91 = 99.96〜100
stroke-dasharray="60 40"，其中
60-破折号
40-gap
正值stroke-dashoffset = 25将线逆时针移动四分之一圆。
由于默认的-stroke-dashoffset = 0圆圈将从90度开始，即从第一象限的x轴
<svg width="50%" height="50%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!-- first chart is from 0-60% -->
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="green"
stroke-width="3"
stroke-dasharray="60 40"
stroke-dashoffset="25">
</circle>
stroke-dashoffset = -35将第二个红色偏移
顺时针旋转到第一条绿线的末端(25-60 = -35)
<svg width="50%" height="50%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!-- first chart is from 0-60% -->
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="green"
stroke-width="3"
stroke-dasharray="60 40"
stroke-dashoffset="25"></circle>
<!-- second chart to start at 60% and go to 90% -->
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="red"
stroke-width="3"
stroke-dasharray="30 70"
stroke-dashoffset="-35"></circle>
</svg>
stroke-dashoffset = -65将橙色的第三个偏移
顺时针旋转到第二条红线的末端(-35-30 = -65)
<svg width="50%" height="50%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!-- first chart is from 0-60% -->
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="green"
stroke-width="3"
stroke-dasharray="60 40"
stroke-dashoffset="25"></circle>
<!-- second chart to start at 60% and go to 90% -->
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="red"
stroke-width="3"
stroke-dasharray="30 70"
stroke-dashoffset="-35"></circle>
<!-- final chart to start at 90% to 100% -->
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="orange"
stroke-width="3"
stroke-dasharray="10 90"
stroke-dashoffset="-65"></circle>
</svg>