16

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

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

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.

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

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

Yura Avramenko
  • 13
  • 5
damcedami
  • 161
  • 6
  • On my system (OS X/Chrome), I'm seeing the extra strokes in the print preview, but not in the exported PDF. What workarounds have you tried so far? [The SVG sample you're working with](https://mdn.mozillademos.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray$samples/Example?revision=648037) contains [invalid markup](http://validator.w3.org/check?uri=https%3A%2F%2Fmdn.mozillademos.org%2Fen-US%2Fdocs%2FWeb%2FSVG%2FAttribute%2Fstroke-dasharray%24samples%2FExample%3Frevision%3D648037&charset=%28detect+automatically%29&doctype=Inline&group=0), so fixing that might help. Try using Inkscape instead? – r3mainer May 26 '15 at 06:52
  • 2
    Ah, stupid me. I forgot to add attribute `fill="none"`, thanks for point it out. Now it's fixed. – damcedami May 26 '15 at 07:27

1 Answers1

20

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"
/>
Wolfgang
  • 3,470
  • 1
  • 20
  • 36