javascript - SVG rect not showing up in firefox but works on chrome - Stack Overflow

admin管理员组

文章数量:1292269

I am drawing a simple two rectangle svg as follows:

<svg  width="72px" height="72px" viewBox="0 0 72 72" xmlns="">
          <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>

This works well in chrome and looks like this:

However, the svg is not showing up in FireFox and I am only seeing the purple 2h box. Any idea whats going on?

I am drawing a simple two rectangle svg as follows:

<svg  width="72px" height="72px" viewBox="0 0 72 72" xmlns="http://www.w3/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>

This works well in chrome and looks like this:

However, the svg is not showing up in FireFox and I am only seeing the purple 2h box. Any idea whats going on?

• javascript
• css
• google-chrome
• firefox
• svg

Share Follow asked Aug 18, 2017 at 22:14 Shruti KapoorShruti Kapoor 1,13622 gold badges1313 silver badges3232 bronze badges 2

• There some questions about the stroke-dashoffset not workin in firefox, like this one stackoverflow./questions/18298482/… – Vega Commented Aug 18, 2017 at 22:22
• 4 The rect has no width and height attributes. – Robert Longson Commented Aug 18, 2017 at 22:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

I expect you are setting the rectangle's width and height using CSS. Correct?

If so, that's an SVG 2 thing that currently only works in Chrome. You'll need to use regular width and height attributes if you want this to be cross-browser patible.

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

As @paul mentioned its a problem with rect()

You can easily convert an SVG rect to a path with inkscape.

Open the .svg in inskape, click on layers, select all rects, convert them to path (cmd shift C). Then go to Object/Transform... and click on apply. Save the file.

本文标签： javascriptSVG rect not showing up in firefox but works on chromeStack Overflow