SVG line stroke-dasharray 无法正确打印到 PDF答案

【问题标题】：SVG line stroke-dasharray not print properly to PDFSVG line stroke-dasharray 无法正确打印到 PDF
【发布时间】：2021-06-08 06:05:00
【问题描述】：

使用stroke-dasharray 打印行到 PDF 创建不同的行为，请看看这里的image。

图片 A，我直接从浏览器 (Chrome) 截取的屏幕截图。 图片B是同一页打印的PDF。

请注意图片 B 中的差异，破折号之间有一条细线，这发生在 Chrome 或 PhantomJS（可能与 WebKit 相关？）中，而在 Firefox 中不会发生。

我尝试将这种chart 导出为PDF，但您可以看到strokoe-dasharray 打印不正确。

上面这张照片是我从MDN 页面拍的，有什么办法可以解决这个问题吗？

【问题讨论】：

在我的系统 (OS X/Chrome) 上，我在打印预览中看到了额外的笔画，但在导出的 PDF 中没有。到目前为止，您尝试了哪些解决方法？ The SVG sample you're working with 包含 invalid markup，因此修复它可能会有所帮助。尝试改用 Inkscape？
啊，愚蠢的我。我忘了添加属性fill="none"，谢谢指出。现在它已经修复了。

【解决方案1】：

这似乎是由fill 属性的某些默认值引起的。您可以通过设置fill="none" 来修复它，如下所示：

<line x1="0" x2="100" y1="0" y2="0"
  stroke="black" stroke-dasharray="1, 2"
  fill="none"
/>

【讨论】：