Clever Geek Handbook

SVG line-dasharray does not print correctly in PDF

Printing line from stroke-dasharray

to PDF creates different behavior, please see image here.

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

Note the difference in picture B, there is a thin line between the dashes, this happens in Chrome or PhantomJS (possibly webkit related?) And does not happen in Firefox.

I'm trying to export this kind of chart to PDF, but as you can see, it strokoe-dasharray

doesn't print correctly.

This is the image above which I took from this MDN page , is there anything I can do to fix this?

+3


source to share


1 answer


It looks like it is caused by some default value for the attribute fill

. You can fix this by setting fill="none"

for example:



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


source






More articles:


All Articles