我正在用SVG中的Bézier曲线绘制音乐诽谤，以便在浏览器中可视化它们并允许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>你能提出解决这个问题的办法吗？
Chrome中的曲线pdf导出中的曲线
问题在于创建形状的方式。
它由两个单独的形状组成，您将它们合并到一个路径中。请看下面的例子，我给这两个子路径不同的颜色。
<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>