我有一个由几个圆圈组成的 SVG。目标是使用破折号阵列技术使用不同的百分比填充不同的圆圈。
目前，只有圆圈“一”（参见带有 的圆圈标签class="one"）是“满的”。其他两个（“二”和“三”）为 0。
但是当在 Safari 中查看 SVG 时，我得到了一个奇怪的人工制品。如果最后生产但订单很重要，我可以解决这个问题，circle.one所以如果可能的话，我不想改变。
代码笔：https ://codepen.io/codeload/pen/KXvLEp
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
<circle cx="27" cy="27" r="25" fill="#293741" fill-opacity=".75" stroke-width="4"></circle>
<circle cx="27" cy="27" r="25" fill="transparent" stroke-width="4" stroke-dasharray="156.067915 0" stroke-dashoffset="39.0169787" class="one"></circle>
<circle cx="27" cy="27" r="25" fill="transparent" stroke-width="4" stroke-dasharray="0 156.067915" stroke-dashoffset="0" class="two"></circle>
<circle cx="27" cy="27" r="25" fill="transparent" fill-opacity=".75" stroke-width="4" stroke-dasharray="0 156.067915" stroke-dashoffset="0" class="three"></circle>
</svg>