gpt4 book ai didi

svg - stroke-dashoffset,位置stroke-dasharray

转载 作者:行者123 更新时间:2023-12-02 03:27:51 28 4
gpt4 key购买 nike

我有 3 个 svg donut chart 表,每个图表都有一条用 stroke-dasharray 创建的线,所有图表加起来为 100%。

我希望每个图表都从最后一个图表结束的地方开始,所以第一个图表是从 0-60%。我希望第二张图表从 60% 开始到 90%,最后一张图表从 90% 到 100%

我正在尝试使用 stroke 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>

最佳答案

半径为 r ="15.91 的圆周等于2 * 3.1415 * 15.91 = 99.96100

stroke-dasharray="60 40",其中

60 - 破折号
40 - 差距

正值 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>

关于svg - stroke-dashoffset,位置stroke-dasharray,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52701491/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com