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 desktop What 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 导出 SVG 的方式与 Safari 不兼容，但我不知道应该对其进行哪些更改。

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

Safari 不支持 <g clip-path="url(something)">由 Figma 添加。这些用于在 Figma 上对向量进行分组，但 Safari 需要它们以 -webkit- 为前缀。正如您在这里看到的:Why doesn't CSS clip-path with SVG work in Safari?

删除这些 <g clip-path></g> 后标记您的 SVG 应正确显示。