pdf - SVG 贝塞尔曲线在浏览器和 PDF 中始终闭合路径

Question

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

这是我的路径:

<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>

注意到形状顶部的两个子路径(红色和绿色)共享一条边吗？沿着该边缘实际上有一个非常薄的矩形，由两个子路径的边缘形成。当路径渲染到屏幕上时，两个形状绘制方式的细微差别有时会导致沿该边缘的一些像素可见。这会在那里出现一条浅灰色的线。

这也是您需要将 fill-rule="evenodd" 添加到路径的原因。这样一来，一条子路径就会在另一条子路径上打出一个洞。否则它们都会被绘制为实心。

<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>

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

<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>