Css 使用stroke dasharray在Safari中呈现SVG

我在Safari中遇到了一个奇怪的SVG渲染问题。我有一个带有笔划的圆，其动画类似于圆形加载程序，但由于某些原因，在添加笔划dashoffset或笔划dasharray后，渲染将立即关闭

gif供参考：

（来源：）

应用其中一种样式后，渲染似乎会变得更加锯齿状

它看起来不太像，但在不止一个圆的情况下，它变得非常明显：

（来源：）

它在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>

你可以

---

有什么想法吗？

您可以尝试添加

形状渲染

，其值为

几何精度

circle {
    shape-rendering: geometricPrecision;
}

• 自动 表示用户代理应适当权衡速度、清晰边缘和几何精度，但几何精度比速度和清晰边缘更重要
• 优化速度 表示用户代理应强调渲染速度，而不是几何精度和清晰的边缘。此选项有时会导致用户代理关闭形状抗锯齿
• crispEdges 表示用户代理应尝试强调艺术品干净边缘之间的对比度，而不是渲染速度和几何精度。为了获得清晰的边缘，用户代理可能会关闭所有直线和曲线的抗锯齿功能，或者可能只关闭接近垂直或水平的直线的抗锯齿功能。此外，用户代理可以调整线条位置和线条宽度，以使边缘与设备像素对齐
• 几何精度 表示用户代理应强调几何精度而不是速度和清晰的边缘

以下SVG形状元素可以使用

形状渲染
：

,

您可以使用CSS
形状渲染
属性控制抗锯齿的使用。将此属性设置为
crispEdge
（在元素或整个SVG上）将关闭抗锯齿功能，从而产生清晰的（如果有时是锯齿状的）线条。
geometricsprecision
的值将强调平滑的边缘。
你有源代码或A来演示该行为吗？给你：刚刚尝试过，运气不好，没有更改渲染：/谢谢你的输入，尽管我很好奇，我通过这个在线清理工具运行了你的SVG，这里是你的代码笔的一个分支，它被清理，你的样式被内联。。你还看到不好的锯齿状边缘吗。。它基本上删除了CSS
stroke dasharray
和
circle
元素的
d
属性中的一些逗号。我想知道这是否是Safari bug？什么Safari版本/版本？在版本9.0.1（11601.2.7.2）和版本8.0.4（10600.4.10.7）中测试
circle {
    shape-rendering: geometricPrecision;
}