javascript - SVG 矩形未显示在 Firefox 中，但适用于 Chrome

Question

我正在绘制一个简单的两个矩形 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 框。 知道发生了什么事吗？

Answer 1

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

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

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