SVG rect not showing up in firefox but works on chrome

Question

I am drawing a simple two rectangle svg as follows:

<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>

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?

Appleby

There some questions about the stroke-dashoffset not workin in firefox, like this one #18298982 – Favata

The rect has no width and height attributes. – Yardage

Answer 1

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 compatible.

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

Elitism

Firefox implemented this some years ago now. – Yardage

Answer 2

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.

Submit

It was a problem. It's was fixed a long time ago. – Yardage

@RobertLongson wdym? I encountered this issue the other day. Rect() doesn't seem to support width/height using css – Submit

did you forget to use units? Feel free to ask another question with your test case. – Yardage