SVG中dashArray的输出因Chrome和IE而异

时间:2017-05-11 04:36:02

标签: javascript css google-chrome internet-explorer svg

我为svg元素(路径)指定了dashArray属性为0,0。但是当我在Chrome和Internet Explorer中运行时,输出会有所不同。

  <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>

Chrome浏览器的屏幕截图: Chrome Browser output

Internet Explorer的屏幕截图:

IE output

所以,我想知道哪一个是正确的输出以及如何在其他浏览器中实现正确的输出。请告诉我你的想法,摆脱这个问题。

谢谢, 陀罗尼。

1 个答案:

答案 0 :(得分:1)

SVG spec is ambiguous on the matter但规范作者澄清说Chrome是对的。不确定规格是否已更新。 Firefox也提供了这条线(在关于你可以在链接的bug中读到的问题进行一些辩论之后)。

如果要在所有浏览器上渲染实线,请完全删除stroke-dasharray属性,或将短划线长度设置为&gt; 0