SVG笔划和填充之间的空间

Question

填充并抚摸具有相同颜色且超过特定大小的stroke-width的圆圈，会在两个绘制区域之间产生奇怪的透明区域。发生了什么事？

在Chrome和Firefox中都会发生这种情况，因此可能是规范，但我在规范中找不到有关此行为的任何语言。

Fiddle

<svg viewBox="0 0 300 300">
  <circle cx="100" cy="100" r="8" 
    stroke="#000" stroke-width="40" 
    fill="#000"/>
</svg>

生成此渲染：

Answer 1

正如罗伯特·朗森所指出的那样，当笔划重叠时，问题会出现，当你将笔划轮廓转换为单独的路径时，它会产生一个环形洞（取决于上弦顺序/填充规则计算） ）。

特定示例中填充和描边之间的差距是由＆＃34;内部＆＃34;笔划的边缘延伸到整个填充区域并从另一侧延伸出来。

当您使用虚线笔划时，它会变得非常奇怪，如Tavmjong Bah's discussion article中的示例所示。

不幸的是，根据SVG规范和规范，这都没有。 相反，此时的规范未定义此事。

SVG working group discussion is here

此时，Mac / Android上的WebKit，Blink和Firefox使用Skia图形库或Apple的CoreGraphics绘制剪切图形。

Windows / Linux上的IE / Edge和Firefox只绘制总笔划，没有剪切，Inkscape和Illustrator以及大多数PDF渲染软件（PDF规范本身都是非承诺的）。

我所讨论过的每个人都同意切口是次优的结果。但是有这么多浏览器使用这样做的渲染引擎，SVG工作组并不愿意将更直观的笔画行为作为严格的要求。相反，SVG 2 spec has a warning-to-authors带有示例数字：

此时，进行更改的最佳前景是在Skia library上提交问题（或提供代码）。如果它被改变了，那就会给Apple带来压力，使其更新以匹配，并且SVG规范将能够使其正式化。

Answer 2

它是一个神器，因为笔划宽度太大，它穿过圆心。它不应该发生，但通过增加r和减小行程宽度可以很容易地避免它。