I have an SVG made up of several circles. The goal is to have different circles filled using different percentages using the dash-array technique.
At the moment, only circle "one" (see circle tag with class="one") is "full". The other two ("two" and "three") are 0.
But am getting a strange artefact when the SVG is viewed in Safari. I can fix this if the make circle.one the last but order is important so I don't want to change, if possible.
Code pen: 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>
