CODEWITHSUNDEEP
csssvgsafarimask
azsl1326
azsl1326

Reputation: 1410

Safari SVG Image Mask Not Resizing using CSS

I am trying to resize an svg image with a mask using css. The issue I am running into is with Safari as it doesn't seem to allow the CSS classes to override the default values. Here's the inline svg code:

<svg width="48" height="48" class="icon green">
<defs>
  <mask id="svgmask-947">
    <image class="svg-image" width="48" height="48" href="/themes/custom/assets/media/images/fa-png/campus.png"></image>
  </mask>
</defs>
<rect class="icon-mask" mask="url(#svgmask-947)" width="48" height="48" y="0" x="0"></rect>

The SVG won't resize, if I simple apply any class to it with a new width/height in CSS. Here's sample CSS:

 .icon, rect, mask image {
   width:24px;
   height: 24px;
}

Applying the CSS in all other browsers works, just not Safari.

Thanks for any insight and help.

Upvotes: 0

Views: 524

Answers (1)

azsl1326
azsl1326

Reputation: 1410

Found the solution as I was missing the viewbox attribute:

<svg width="48" height="48" class="icon green" viewBox="0 0 48 48">
<defs>
  <mask id="svgmask-980">
    <image class="svg-image" width="48" height="48" href="/themes/custom/assets/media/images/fa-png/campus.png"></image>
  </mask>
</defs>
<rect class="icon-mask" mask="url(#svgmask-980)" width="48" height="48" y="0" x="0"></rect>

Upvotes: 2

Related Questions