SVG linestroke-dasharray 无法正确打印到 PDF [英] SVG line stroke-dasharray not print properly to PDF

问题描述

使用 stroke-dasharray 打印线到 PDF 创建不同的行为，请在此处查看 图像.

Print line with stroke-dasharray to PDF create different behavior, please look at the image here.

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

Picture A, a screenshot I took directly from the browser (Chrome). Picture B is the printed PDF from the same page.

注意图片 B 中的不同，破折号之间有一条细线，这在 Chrome 或 PhantomJS(可能与 WebKit 相关?)中发生，而在 Firefox 中没有发生.

Notice the difference in Picture B, there's a thin line between the dash, this happens in Chrome or PhantomJS (probably WebKit related?) and not happen in Firefox.

我想做的是导出这种 chart 到 PDF，但正如你所看到的 strokoe-dasharray 没有正确打印.

What I trying to do is export this kind of chart to PDF, but as you can see strokoe-dasharray not printed properly.

上面这张图片是我从这个MDN 页面，我可以做些什么来解决这个问题?

That picture above I took from this MDN page, Is there anything I can do to fix this?

推荐答案

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

It seems that this is caused by some default value for the fill attribute. You can fix it by setting fill="none", like this:

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

这篇关于SVG linestroke-dasharray 无法正确打印到 PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！