在Safari

Question

我尝试使用SVG创建圆环图，并在Safari中查看时遇到问题。这是一个表明问题的小提琴;我将在下面详细描述它：

https://jsfiddle.net/nijhazer/phy2ossh/

这个小提琴显示了一个由两个重叠在一起的圆圈组成的图形。当Safari用户在其浏览器中增加缩放尺寸时，问题变得明显：

示例中的相关HTML：

<div class="donut-chart">
    <svg width="200" height="200">
        <circle class="backdrop" cx="100" cy="100" r="65" fill="#d5d8d5" stroke="none" stroke-width="0"></circle>
        <circle class="progress" cx="100" cy="100" r="75" fill="none" stroke="lightgreen" stroke-width="20" style="stroke-dashoffset: 353.428875px;"></circle>
        <circle class="outer-ring" cx="100" cy="100" r="85" fill="none" stroke="#d5d8d5" stroke-width="1"></circle>
    </svg>
</div>

示例中的相关CSS：

body {
    background-color: white;
}
.donut-chart {
    width: 200px;
    height: 200px;
    position: relative;
}
svg {
    width: 200px;
    height: 200px;
}
.progress {
    stroke-dasharray: 471.24;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    background-color: transparent;
}