Clip path SVG not scaling in Firefox - working in other browsers

Question

I'm trying to get my logo to work properly for all browsers, but I can't get it working in Firefox.

I'm using the transform:scale() property to grow the SVG. I have tried everything from adding a viewbox and many other svg properties. I even just took an svg directly exported from Illustrator and hosted that, but all with no success.

The code to rescale the SVG looks as follows:

var resize = function () {
  var svgPath = document.getElementById('SVGID_1_');
  var scale = ((Math.min(2048,window.innerWidth) / 425)).toFixed(2);
  var scaleStyle = 'scale(' + scale + ')';
  svgPath.style.transform = scaleStyle;
  svgPath.style.webkitTransform = scaleStyle;
}

It's scaling properly everywhere (even on iOS browsers) but not in Firefox.

My code can be found live at: https://codepen.io/unrealnl/pen/agPpgy

Answer 1

The best option is to take advantage of objectBoundingBox value for the clipPathUnits property to be applied on <clipPath /> element. This solution doesn't need js at all.

Should be something like this:

<svg class="svg">
  <defs>
    <clipPath id="clip" clipPathUnits="objectBoundingBox">
      <path d="..."></path>
    </clipPath>
  </defs>
</svg>

To then apply the mask as you are doing here, something like:

.elem {
  clip-path: url(#clip);
}

---

Here is the full working example and here the code details to play with.

Important advice

You have to re-export your svg to be compatible with the clipPathUnits props.

Quoting Sara Soueidan from this useful article

One important thing to note here is that when you use the objectBoundingBox value, the coordinates specified for the contents of the <clipPath> must be in the range [0, 1]—the coordinate system becomes a unit system, and the coordinates of the shapes inside a clipPath have to be fractions in that range.

So to reproduce the demo I re open your svg using Adobe Illustrator (but could be any vector editor program) and scale/place the path into a canvas of 1x1 pixel, then re-exported and voilà!