SVG Bézier 曲线总是在浏览器和 PDF 中关闭路径

Question

我正在用 SVG 中的贝塞尔曲线绘制音乐连线，以便在浏览器中可视化它们并允许导出 pdf。它工作正常。但是如果你放大你可以看到有一条线连接这两个顶点：我需要去掉那条线。在 Inkscape 中，该行不存在，但它确实出现在所有浏览器中（尤其是 Chrome），即使它实际上是不可见的。我的问题是，当您将其打印为 PFD（我只需单击 ctrl+P 并保存文件）时，该行会变得更粗，并且音乐 sheet 不能那样发布！

这是我的路径：

<svg height="150px" width="100%"><path d="M 28 39 q 15 29 40 -13 M 28 39 q 15 25 40 -13" stroke="black" stroke-width="0.5" fill="black" fill-rule="evenodd"></path></svg>

请问有什么办法可以解决这个问题吗？

curve in Chrome curve in pdf export

Answer 1

问题在于您创建形状的方式。

它由两个单独的形状组成，您将它们合并为一条路径。请参阅下面的示例，其中我为两个子路径指定了不同的颜色。

<svg width="400px" viewBox="0 0 70 60">
  <path d="M 28 39 q 15 29 40 -13" fill="red" opacity="0.5"/>
  <path d="M 28 39 q 15 25 40 -13" fill="green" opacity="0.5"/>
</svg>

注意到两个 sub-paths（红色和绿色）共用一条边的形状顶部了吗？沿着那个边缘实际上有一个非常薄的矩形，由两个 sub-paths 的边缘形成。当路径呈现到屏幕上时，两个形状的绘制方式略有不同，有时会导致沿该边缘的一些像素可见。这可以使那里出现浅灰色线。

这也是您需要将 fill-rule="evenodd" 添加到路径中的原因。就是这样 sub-path 在另一个上打了一个洞。否则它们都会被画成实心的。

<svg width="400px" viewBox="0 0 70 60">
  <path d="M 28 39 q 15 29 40 -13 M 28 39 q 15 25 40 -13" fill="black"/>
</svg>

解决方法是确保您的形状只有一条路径。不是两个sub-paths。该路径应绕过形状的边界。从一侧到另一侧，然后沿着另一侧返回。

<svg width="400px" viewBox="0 0 70 60">
  <path d="M 28 39 q 15 29 40 -13 q -25 38 -40 13 Z" fill="black"/>
</svg>

所以你的原始 SVG 的固定版本如下：

<svg height="150px" width="100%"><path d="M 28 39 q 15 29 40 -13 q -25 38 -40 13 Z" stroke="black" stroke-width="0.5" fill="black" fill-rule="evenodd"></path></svg>

SVG Bézier 曲线总是在浏览器和 PDF 中关闭路径

SVG Bézier's curve always closes path in browser and PDF

pdf

svg

bezier

export-to-pdf