内联 SVG 在 Safari 和 Mobile Safari 中中断

Answer 1

事实证明，如果省略

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

的值很重要。我还有其他几个具有

preserveAspectRatio="none meet"

的内联 SVG 元素，它们不受此问题的影响。

Answer 2

另一个场景/修复方法是，如果您通过 CSS 缩放 SVG，以确保同时声明了

max-width

和

max-height

。

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

Answer 3

我也遇到了这个问题，其中只有许多重复的 SVG 中的第一个会显示在列表显示中。这是因为 SVG 在元素中有一个带有 ID 的 ClipPath。

解决方案是为除第一个之外的每个 SVG 删除 中的 ，或者将其全部删除。