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。正确的吗？

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

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