当圈子堆叠时，SVG Circle在Safari中呈现错误

Question

我有一个由几个圈子组成的SVG。目标是使用虚线阵列技术使用不同的百分比填充不同的圆圈。

目前，只有圈“一”（请参阅​​带有class="one"的圆圈标记）是“已满”。另外两个（“两个”和“三个”）是0.

但是当在Safari中查看SVG时，我得到一个奇怪的人工制品。我可以解决这个问题，如果make 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>