Menu
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?
430
The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape; Note: As a presentation attribute, stroke-dasharray can be used as a CSS property. You can use this attribute with the following SVG elements: <altGlyph> <circle>
The stroke-dasharray property can be used as a CSS property as a presentation attribute. It can be applied to any element but can have an effect only on the following elements: <altGlyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, and <tspan>.
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"
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
