CODEWITHSUNDEEP
cssfirefoxsvg
This and that
This and that

Reputation: 77

Firefox and responsive SVG

Here is a thing.

I have a 700x700px image that i would need to mask with SVG. For Chrome and Safari i did that by using -webkit-mask-box-image with external SVG and it works properly. For Firefox, i used clip-path property, and again, it functions properly.

The responsive part is problem.On Chrome&Safari, that part is working nicely, but on Firefox only the main image is resized, mask stays the same. I am a complete newbie at this and i tried tons of solutions that i found online and i really couldn’t make it work.

<style>
body {
  background: yellow;
}
.img-mask {
  -webkit-mask-box-image: url('http://imgh.us/mask_3.svg');
  mask-border: url('http://imgh.us/mask_3.svg');
  clip-path: url(#mask);
}
</style>


<img src="http://gto-live.com/wp-content/uploads/2015/04/charm-elegance-colorful-sofa-living-room-decor-718x718.jpg" class="img-mask">
enter code here
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="700" height="700" viewBox="0 0 700 700">
  <clipPath id="mask">
  <path d="M718.004,358.999 C718.004,160.726 557.272,-0.007 358.998,-0.007 C160.725,-0.007 -0.007,160.726 -0.007,358.999 C-0.007,557.272 160.725,718.005 358.998,718.005 C557.272,718.005 718.004,557.272 718.004,358.999 Z"/>
  </clipPath>
</svg>

Any help would really really be gratefully appreciated! Fiddle can be found here https://jsfiddle.net/y7zaw4bz/1/

Upvotes: 0

Views: 591

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

You need to use objectBoundingBox units (and make the path run from 0 to 1) e.g.

body {
  background: yellow;
}
img {
  width: 100%;
}
.img-mask {
  -webkit-mask-box-image: url('http://imgh.us/mask_3.svg');
  mask-border: url('http://imgh.us/mask_3.svg');
  clip-path: url(#mask);
}
<img src="http://gto-live.com/wp-content/uploads/2015/04/charm-elegance-colorful-sofa-living-room-decor-718x718.jpg" class="img-mask">

<svg preserveAspectRatio="xMidYMid" width="700" height="700" viewBox="0 0 700 700">
  <clipPath id="mask" clipPathUnits="objectBoundingBox">
    <path transform="scale(0.0014)" d="M718.004,358.999 C718.004,160.726 557.272,-0.007 358.998,-0.007 C160.725,-0.007 -0.007,160.726 -0.007,358.999 C-0.007,557.272 160.725,718.005 358.998,718.005 C557.272,718.005 718.004,557.272 718.004,358.999 Z"/>
  </clipPath>
</svg>

Here I've scaled the path to correct the units 0.0014 is roughly 1 / 700

Upvotes: 1

Related Questions