logo标签列表

SVG描边和填充之间的间距

svg
6
用相同的颜色填充和描边圆形，并使 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>

生成以下呈现：

A black circle with a transparent ring inside

3个回答
6
正如Robert Longson所指出的那样，当一个描边重叠在一起时，如果将描边轮廓转换为单独的路径，它会创建一个甜甜圈空洞（取决于绕序/填充规则计算）。
在你的特定示例中，填充和描边之间的间隙是由描边的“内侧”沿着整个填充区域延伸到另一侧造成的。
当你有虚线描边时，情况就变得非常奇怪，就像Tavmjong Bah的讨论文章中所展示的示例一样。
不幸的是，这既不符合SVG规范，也不违反规范。相反，在此时此刻，规范已将此事未定义。 SVG工作组讨论在这里。
目前，Mac / Android上的WebKit、Blink和Firefox使用Skia图形库或Apple的CoreGraphics绘制具有切割的描边。
IE / Edge和Windows / Linux上的Firefox只绘制总描边，没有切割，Inkscape和Illustrator以及大多数PDF渲染软件也是如此（PDF规范本身是不承诺的）。
我与所有讨论过此事的人都认为切割是次优结果。但由于如此多的浏览器使用以这种方式处理的渲染引擎，SVG工作组不愿意将更直观的描边行为作为严格要求。因此，SVG 2规范具有作者警告和一个示例图： Two versions of a curved line with a thick stroke. The line ends in a sharp hook, that causes the stroke to curve over itself. In one version, the overlap is instead drawn as a cut-out arc segment. 目前，使改变成为可能的最佳前景是在Skia库上提出问题（或贡献代码）。如果更改了它，这会对Apple施加压力以进行更新，并且SVG规范将能够使其正式化。
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
@Tigt 确定，我已经删除了第二个1000，但是如果没有 stroke-linecap 它就无法正常工作。 - Alexander Ulitin
哦，对了，我不是想要删除那个的。明确一下，我发现有效的方法是 stroke-linecap="round" stroke-dasharray="1000"（如果你有某种原因需要使用的话，我认为 stroke-linecap="square" 也可以）。 - Tigt
2

这是一种不良现象，因为描边宽度太大，导致穿过了圆心。这种情况本不应该出现，但可以通过增加r和减小描边宽度轻松避免。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接