Safari 和 Mobile Safari 中的内联 SVG 中断

Posted 2023-03-06

【中文标题】Safari 和 Mobile Safari 中的内联 SVG 中断

【英文标题】：Inline SVG breaks in Safari and Mobile Safari

【发布时间】：2014-09-25 06:20:39

【问题描述】：

我最近推出了一个使用了一些内联 SVG 的网站。

<svg class="divider-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 55.221 58.079" enable-background="new 0 0 55.221 58.079" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
     <path d="[...]"/>
</svg>

在 Chrome 和 Firefox 中一切都很完美，但是当我在 iPhone 或桌面 Safari 上进行测试时，布局完全被破坏了，并且许多 SVG 都丢失了。我通过 W3C 验证器运行源代码，一切都找到了。我经常使用 SVG，所以这很令人困惑......

【参考方案1】：

另一种情况/解决此问题的方法是，如果您通过 CSS 缩放 SVG，以确保您同时声明了 max-width 和 max-height。

.whatever svg 
  vertical-align: middle;
  max-height: 1rem;
  max-width: 1rem;

【参考方案2】：

事实证明，如果你省略了 height 和 width 属性，Safari 和 Mobile Safari 就会崩溃，我使用 CSS 设置尺寸，这在其他浏览器中运行良好。但我必须重新添加这些属性以使其行为一致：

<svg class="divider-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 55.221 58.079" enable-background="new 0 0 55.221 58.079" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
     <path d="[...]"/>
</svg>

请注意上面缺少的 width 和 height 属性。

另外，有趣的是，preserveAspectRatio 的值很重要。我有几个其他内联 SVG 元素具有 preserveAspectRatio="none meet"，它们不受此问题的影响。

【讨论】：

在添加宽度/高度属性之前，我在 IE9 中遇到了问题。谢谢

我今天遇到了同样的问题，这个建议很有帮助。仅具有“viewBox”值的 SVG 在多个 Windows 桌面浏览器上运行良好，但如果不包含“宽度”和“高度”属性，图像将不会显示在 ios 14.8（iPhone 13）浏览器（Chrome 和 Firefox）中。此外，由于我的原始图像没有“preserveAspectRatio”属性，并且它们在 iOS 上开始正常工作，我只是继续没有该属性。我不确定是否有必要。

我遇到了类似的问题，即内联 svg 根本没有出现在 iPad 上的 Safari 中（尽管在 linux/android 上使用 firefox/chrome）。将width 和height CSS 规则应用于svg 元素就足以使其呈现。不需要添加width 和height 属性。