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>

你能建议任何方法来解决这个问题吗？

pdf 导出中的 Chrome曲线中的曲线

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>