SVG路径的奇怪行为

Question

考虑以下svg代码：

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">

<path d="M 180 100 C 180 105 180 120 182 120 " stroke="black" fill="none" stroke-width="3"></path>

</svg>

我的浏览器（chrome）呈现如下。请注意路径末尾的奇怪“吃豆人”效果。

这是怎么回事？

Answer 1

当线宽相对于曲线的“紧密度”较大时（如路径定义中的情况），可能会出现奇怪的渲染效果。

请参考 13.5.7节。计算svg spec的笔触形状以获取详细信息：

作者应注意，在某些情况下（例如，极紧的曲线），笔触的形状可能会因平台而异。

---

为什么会发生这种情况，请将此形状视为一个自相交的填充多边形，并考虑使用oddeven的{​​{1}}规则对其进行渲染（请参见 13.4.2节。缠绕规则：“填充规则”属性）。

---

以下是曲线的夸张版本，使用线宽50来说明这种行为：

fill

---

最后，这是一个“细而宽的画笔”的可视化效果，它绘制了形状的底部。尤其要注意，它是如何在行尾向已绘制区域回溯的。

...这就是用“细而宽的刷子”的两个尖端制成的形状的周长：