Safari SVG图像蒙版未使用CSS调整大小

我正在尝试使用CSS使用蒙版调整SVG图像的大小。我遇到的问题与Safari有关,因为它似乎不允许CSS类覆盖默认值。这是内嵌的svg代码:

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

如果我简单地将任何类应用于CSS中具有新的宽度/高度的SVG,则不会调整其大小。这是示例CSS:

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

在所有其他浏览器中应用CSS均有效,只是Safari无效。

感谢您的见解和帮助。

mingjiu1988 回答:Safari SVG图像蒙版未使用CSS调整大小

找到了解决方案,因为我缺少viewbox属性:

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

,

我想Safari和@media之间存在合规性问题。

您尝试过this solution吗?

本文链接:https://www.f2er.com/3164999.html

大家都在问