1

我在 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;
}

你可以在这里测试它。

有任何想法吗？

4

1 回答 1

2

您可以尝试shape-rendering添加geometricPrecision

circle {
    shape-rendering: geometricPrecision;
}

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

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

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

<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>,<rect>

shape-rendering您可以使用 CSS属性控制抗锯齿的使用。将此属性设置为crispEdges（在一个元素或整个 SVG 上）将关闭抗锯齿，从而产生清晰的（如果有时是锯齿状的）线条。的值geometricPrecision将强调平滑边缘。

于 2015-12-08T18:10:09.727 回答