内联SVG在Safari和移动Safari中崩溃

Question

我最近推出了一个网站，其中使用了一些内联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，所以这让我感到非常困惑…

- emersonthis

Answer 1

原来，如果省略我用CSS设置尺寸的height和width属性，Safari和Mobile Safari会出现问题。但是我不得不重新添加这些属性以使其表现一致:

<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"
     width="55.221px" height="58.079px" 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"，它们不受此问题的影响。

- emersonthis

---

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

我今天遇到了同样的问题，这个建议帮了我很大忙。使用仅有“viewBox”值的SVG图片在多个Windows桌面浏览器上运行良好，但是在iOS 14.8（iPhone 13）浏览器（Chrome和Firefox）中，这些图像将无法显示，除非包含“width”和“height”属性。此外，由于我的原始图像没有“preserveAspectRatio”属性，而它们在iOS上正常工作，所以我继续使用它们而不需要该属性。我不确定这是否必要。 - Michael Ryan

我曾经遇到过类似的问题，即内联SVG在iPad上的Safari中根本没有显示（但在Linux / Android上的Firefox / Chrome上工作正常）。只需对“svg”元素应用“width”和“height”CSS规则即可使其呈现。不需要添加“width”和“height”属性。 - Harald

Answer 2

另一种解决此问题的方案是，如果您正在通过CSS缩放SVG，请确保同时声明max-width和max-height。

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

- SCdF