SVG 图像无法在 Safari 中正确呈现答案

【问题标题】：SVG images not rendering properly in SafariSVG 图像无法在 Safari 中正确呈现
【发布时间】：2020-05-02 04:43:55
【问题描述】：

我在我的项目中使用 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 以与 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>

谢谢！

【问题讨论】：

看起来它可能是 Safari 无法处理的过滤器 (filter2_ddddd) 中的某些内容。
@RobertLongson 我尝试删除 filter2_ddddd。它只影响信封盖上的白色背景。在 Safari 中似乎仍然没有效果

标签： svg safari

【解决方案1】：

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

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

【讨论】：