SVG 描边和填充之间的空间答案

【问题标题】：Space between SVG stroke and fillSVG 描边和填充之间的空间
【发布时间】：2017-06-16 00:13:24
【问题描述】：

用相同的颜色和超过一定大小的stroke-width 填充和描边，会在两个油漆区域“之间”产生一个奇怪的透明区域。怎么回事？

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

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

生成此渲染：

【问题讨论】：

标签： svg

【解决方案1】：

正如 Robert Longson 所指出的，当您将笔划轮廓转换为单独的路径时（取决于缠绕顺序/填充规则计算），当笔划以这样的方式重叠自身时，就会出现问题)。

在您的特定示例中，填充和描边之间的间隙是由描边的“内部”边缘延伸到整个填充区域并从另一侧向外延伸造成的。

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

不幸的是，这既不符合 SVG 规范，也不违反规范。相反，此时的规范未定义问题。 p>

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 上提交问题（或贡献代码）。如果它被改变，苹果就会面临更新以匹配的压力，而 SVG 规范将能够使其正式化。

【讨论】：

【解决方案2】：

这是一个人工制品，因为笔触宽度太大，它穿过圆的中心。这不应该发生，但可以通过增加 r 和减少笔划宽度来轻松避免。

【讨论】：

【解决方案3】：

我发现添加 stroke-linecap="round" style="stroke-dasharray: 1000" 通过引入虚拟破折号解决了这个问题

<svg viewBox="0 0 300 300">
  <circle cx="100" cy="100" r="8" 
    stroke="#000" stroke-width="40" 
    fill="#0F0" stroke-linecap="round" style="stroke-dasharray: 1000" />
</svg>

【讨论】：

非常酷！我想在浏览器/操作系统/甚至可能是底层图形 API（感谢 Windows）上对此进行广泛测试，但任何解决方法都比没有好！我认为我们甚至可以更简洁地将您的方法写成stroke-dasharray="1000"
@Tigt 当然，我删除了第二个 1000，但是如果没有 stroke-linecap，它就无法工作。
哦，没错，我不是故意要删除它的。明确地说，我发现有效的是 stroke-linecap="round" stroke-dasharray="1000"（如果您出于某种原因需要使用它，我认为 stroke-linecap="square" 也有效）