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

我希望你设置矩形width并height使用CSS.正确？

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

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