带有双倍宽度椭圆的 safari svg

Question

我正在尝试创建一个带有椭圆元素的简单 SVG，但在 Safari（并且只有 Safari）中，它绘制了所有 非圆形 椭圆，笔画宽度加倍。如果椭圆是完美的圆形 (rx == ry)，那么它会正常绘制。

有没有人以前见过这种行为，或者知道如何解决它？我在 macOS 10.12.1、Safari 10.0.1 (12602.2.14.0.7) 上看到了这种行为。它也只出现在我的视网膜显示器 (2014 MBP) 上，而不出现在外部非视网膜显示器上。

这是我正在使用的 html 文件：

<!DOCTYPE html>

<body>

<style>
  circle {
    stroke: blue;
    stroke-width: 3;
    fill: none;
  }
  ellipse {
    stroke: green;
    stroke-width: 3;
    fill: none;
  }
</style>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="50" cy="50" r="40"/> <!--Draws with normal stroke-->
  <circle cx="60" cy="60" r="40"/> <!--Draws with normal stroke-->
  <ellipse cx="70" cy="70" rx="40" ry="20"/> <!--Draws with doubled stroke-->
  <ellipse cx="80" cy="80" rx="20" ry="20"/> <!--Draws with normal stroke-->
</svg>

</body>

这是结果的屏幕截图：

Answer 1

此问题与底层框架有关。它将在下一个 OS 更新中得到纠正。 https://bugs.webkit.org/show_bug.cgi?id=164505#c3

带有双倍宽度椭圆的 safari svg

safari svg with double-width ellipse

svg

safari

ellipse