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

dam*_*ami 8 pdf svg webkit stroke-dasharray

打印行与stroke-dasharrayPDF创建不同的行为,请在此处查看图像.

图片A,我直接从浏览器(Chrome)截取的截图.图B是来自同一页面的打印PDF.

请注意图B中的差异,破折号之间有细线,这可能发生在Chrome或PhantomJS(可能与webkit相关?)中,而不是在Firefox中发生.

我想要做的是将这种图表导出为PDF,但是你可以看到strokoe-dasharray没有正确打印.

上面的图片是我从这个MDN页面上看到的,有什么办法可以解决这个问题吗?

Wol*_*ang 7

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

<line x1="0" x2="100" y1="0" y2="0"
  stroke="black" stroke-dasharray="1, 2"
  fill="none"
/>
Run Code Online (Sandbox Code Playgroud)

  • 这看起来像 [Chrome bug #123072](https://bugs.chromium.org/p/chromium/issues/detail?id=123072),但它在 2012 年关闭,所以我不知道为什么我看到现在这个问题。 (2认同)
  • 这在 chrome v65 中仍然存在。`fill='none'` 解决了这个问题。 (2认同)
  • chrome v71 中仍然存在错误。`fill='none'` 修复了它 (2认同)
  • 非常感谢您发布此内容,添加 `fill='none'` 也对我起到了作用。 (2认同)