SVG矩形没有出现在Firefox，但适用于Chrome

我画一个简单的双矩形SVG如下：SVG矩形没有出现在Firefox，但适用于Chrome

<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框。任何想法发生了什么？

来源

2017-08-18 Shruti Kapoor

有关于中风dashoffset在Firefox不干活，这样一个https://stackoverflow.com/questions/18298482/mozilla-not-working-with-svg-stroke-dashoffset – Vega

的矩形的一些问题没有宽度和高度属性。 –

我希望你正在设置使用CSS的矩形'width和height。正确？

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

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

来源

2017-08-19 06:38:30

SVG矩形没有出现在Firefox，但适用于Chrome

回答

相关问题