CODEWITHSUNDEEP
javascriptcssgoogle-chromeinternet-explorersvg
Dharani
Dharani

Reputation: 1106

Output of dashArray in SVG differs with Chrome and IE

I have specified dashArray property as 0,0 for svg element(path). But when I run this in Chrome and Internet Explorer, the output differs.

  <svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="0,0" d="M5 20 l215 0" />
    <path stroke-dasharray="5,2" d="M5 40 l215 0" />
  </g>
</svg>

Screenshot for Chrome browser: Chrome Browser output

Screenshot for Internet Explorer:

IE output

So,I would like to know which one is the correct output and how to achieve the correct output in other browser. Kindly, suggest me your ideas to get rid of this issue.

Thanks, Dharani.

Upvotes: 1

Views: 107

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

The SVG spec is ambiguous on the matter but the spec authors clarified that Chrome is right. Not sure whether the spec has been updated yet. Firefox renders the line too (after some debate on the matter that you can read in the linked bug).

If you want to render a solid line on all browsers, remove the stroke-dasharray property altogether, or set the dash length to something > 0.

Upvotes: 1

Related Questions