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

回答

相關問題