在Safari中使用笔划-dasharray进行SVG渲染

Question

我在Safari中使用SVG遇到奇怪的渲染问题。我有一个带有笔触的圆形动画，类似于圆形加载器，但是由于某种原因，一旦添加stroke-dashoffset或stroke-dasharray，渲染就会关闭。

供参考的gif：

_{（来源：askenielsen.dk）}

一旦应用这些样式之一，渲染似乎就变得更加参差不齐。

看起来不多，但是一个多圈就很明显了：

_{（来源：askenielsen.dk）}

[在视网膜显示屏上的Safari或IE，Firefox，Chrome等中看起来不错

无论在哪种浏览器中，圆的缩放比例或笔划宽度都不会改变问题。

SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 134 134" enable-background="new 0 0 134 134" xml:space="preserve" width="134px" height="134px">   
    <path class="circle" d="M67,6c33.7,0,61,27.3,61,61c0,33.7-27.3,61-61,61c-33.7,0-61-27.3-61-61C6,33.3,33.3,6,67,6"/>
    <path class="circle" d="M67,13c29.8,0,54,24.2,54,54s-24.2,54-54,54S13,96.8,13,67S37.2,13,67,13"/>
    <path class="circle" d="M67,20c26,0,47,21,47,47s-21,47-47,47S20,93,20,67S41,20,67,20"/>         
</svg>

CSS

.circle {
    fill: none;
    stroke: red;
    stroke-width: 4px;
    /* THE STYLE THAT MESSES UP THE RENDERING */
    stroke-dasharray: 200px, 200px;
}

您可以test it here。

有什么想法吗？

Answer 1

您可以尝试将shape-rendering与geometricPrecision的值相加

circle {
    shape-rendering: geometricPrecision;
}

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering

• 自动指示用户代理应进行适当的权衡以平衡速度，明快边缘和几何精度，但几何精度比速度和明快边缘更为重要。
• optimizeSpeed指示用户代理应强调渲染速度，而不是几何精度和边缘清晰。此选项有时会导致用户代理关闭形状抗锯齿功能。
• crispEdges指示用户代理应尝试强调图稿的干净边缘在渲染速度和几何精度上的对比。为了获得清晰的边缘，用户代理可以关闭所有线条和曲线的抗锯齿功能，或者可能仅关闭接近垂直或水平方向的直线的抗锯齿功能。此外，用户代理可能会调整线的位置和线的宽度，以使边缘与设备像素对齐。
• geometricPrecision指示用户代理应强调速度和明快边缘的几何精度。

以下SVG形状元素可以使用shape-rendering：

[<circle>，<circle>，<ellipse>，<ellipse>，<line>，<line>，<path>

您可以通过CSS <path>属性控制抗锯齿的使用。将此属性设置为<polygon>（在元素或整个SVG上）将关闭抗锯齿功能，从而导致线条清晰（有时会出现锯齿）。值<polygon>将强调平滑边缘。