SVG rect 未出现在 Firefox 中，但适用于 chrome答案

【问题标题】：SVG rect not showing up in firefox but works on chromeSVG rect 未出现在 Firefox 中，但适用于 chrome
【发布时间】：2017-08-18 22:14:19
【问题描述】：

我正在绘制一个简单的两个矩形 svg，如下所示：

<svg  width="72px" height="72px" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
          <rect stroke-dashoffset="0" x="2.4px" y="2.4px"></rect>
          <rect ng-class="$ctrl.expiryClass"
          x="2.4px" y="2.4px"
          stroke-dasharray={{$ctrl.dashlength}}
          stroke-dashoffset={{$ctrl.offset}}></rect>
      </svg>

这在 chrome 中效果很好，看起来像这样：

但是，svg 没有出现在 FireFox 中，我只看到紫色的 2h 框。知道发生了什么吗？

【问题讨论】：

有一些关于stroke-dashoffset 在firefox 中不起作用的问题，比如stackoverflow.com/questions/18298482/…
矩形没有宽高属性。

标签： javascript css google-chrome firefox svg

【解决方案1】：

我希望您使用 CSS 设置矩形的 width 和 height。对吗？

如果是这样，那就是目前仅适用于 Chrome 的 SVG 2。如果您希望跨浏览器兼容，则需要使用常规的 width 和 height 属性。

<rect stroke-dashoffset="0" x="2.4px" y="2.4px" width="100px" height="100px"/>

【讨论】：