css - 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 不行。
感谢您的任何见解和帮助。
解决方案
找到了解决方案,因为我缺少 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>
推荐阅读
- python - 如何删除(弹出)Keras InceptionV3 预训练模型的初始层?
- node.js - 如何更新多个文档?
- angular - Jasmine 抛出错误:超时 - 在 jasmine.DEFAULT_TIMEOUT_INTERVAL 指定的超时内未调用异步回调
- c# - 如何在 Revit API 中捕获 Revit 错误?
- android - Seekbar 在 viewpager 内无法平滑滚动
- sql-server - 资源池默认系统内存不足,无法运行此查询
- dart - 消除原子钟 API 调用的延迟
- java - 如何使用休眠映射数据库表上的继承类?
- android - Android - 如何使用改造获得正常 http 调用的进度
- visual-studio-code - 如何在 vscode 扩展 webview 选项卡中将选项卡上的关闭图标 (x) 更改为圆圈?