Search code examples
javascriptcssgoogle-chromefirefoxsvg

SVG rect not showing up in firefox but works on chrome

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:

Progress bar as svg rect

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

Solution

  • 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"/>