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

【问题标题】：Safari SVG Image Mask Not Resizing using CSSSafari SVG 图像蒙版未使用 CSS 调整大小
【发布时间】：2023-03-19 19:40:02
【问题描述】：

我正在尝试使用 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 不行。

感谢您的任何见解和帮助。

【问题讨论】：

标签： css svg safari mask

【解决方案1】：

找到解决方案，因为我缺少 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>

【讨论】：