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?

2
  • 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 contains invalid markup, so fixing that might help. Try using Inkscape instead?
    – r3mainer
    May 26, 2015 at 6:52
  • 2
    Ah, stupid me. I forgot to add attribute fill="none", thanks for point it out. Now it's fixed.
    – damcedami
    May 26, 2015 at 7:27

1 Answer 1

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"
/>
5
  • 2
    This looks like Chrome bug #123072, but that was closed in 2012 so I'm not sure why I'm seeing this problem now.
    – Wolfgang
    Nov 28, 2017 at 0:33
  • 2
    This still exists in chrome v65. fill='none' fixed the issue.
    – kiranvj
    Jun 19, 2018 at 4:26
  • 2
    Bug still exists in chrome v71. fill='none' fixed it
    – Ted
    Jan 18, 2019 at 15:09
  • 2
    Thanks a lot for posting this, adding fill='none' did the trick for me as well.
    – LTFoReal
    Mar 21, 2020 at 16:07
  • what would be the fix here if you need both stroke and fill ?
    – ASG
    Jan 29, 2021 at 12:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.