SVG图片无法在Safari中正确呈现

Question

我在我的项目中使用了Figma生成的SVG图像。它可以在除Safari之外的所有浏览器中完美运行]

This is the expected result and what gets rendered by Chrome, IE, Edge, and Firefox

This is what gets rendered in Safari in desktopWhat gets rendered in safari on tablets

And this is what gets rendered in Safari on mobile

您可以从屏幕快照中看到，信封SVG图像根本不在Safari桌面上呈现，而仅在移动设备上呈现了一部分。在平板电脑上，信封和卡片（两个SVG）的图像层似乎都没有渲染，只剩下了渐变层。

我将HTML中的SVG用作<img>，我尝试使用<iframe>和<object>，但没有区别。

我还检查了MIME类型是否为image/svg+xml

我怀疑Figma以与Safari不兼容的方式导出了SVG，但是我不知道我应该对其进行哪些更改。

SVG文件本身很长，所以我将这些部分粘贴到<defs>和here's the link to the full file上

<svg width="931" height="932" viewBox="0 0 931 932" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<g id="envelope-lid__background" filter="url(#filter2_ddddd)">
  <path id="envelope-lid__background__paper" d="M831.539 396.004L568.68 68.7688C565.5 64.8096 559.912 63.7347 555.465 66.2266L187.878 272.186L831.539 396.004Z" fill="url(#pattern0)"/>
</g>

<g id="envelope-lid__inlay" filter="url(#filter3_ddddd)">
  <path id="envelope-lid__inlay__foil-texture" d="M795.178 389.382L561.179 98.0748C558.348 94.5503 553.374 93.5934 549.415 95.8117L222.186 279.158L795.178 389.382Z" fill="url(#pattern1)"/>
  <path id="envelope-lid__inlay__color" class="envelope-inlay-color" d="M795.178 389.382L561.179 98.0748C558.348 94.5503 553.374 93.5934 549.415 95.8117L222.186 279.158L795.178 389.382Z" fill="black" fill-opacity="0.6"/>
  <path id="envelope-lid__inlay__gradient" d="M795.178 389.382L561.179 98.0748C558.348 94.5503 553.374 93.5934 549.415 95.8117L222.186 279.158L795.178 389.382Z" fill="url(#paint0_linear)" fill-opacity="0.5"/>
</g>

谢谢！

Answer 1