SVG 在 Safari 上不显示

Question

我从 Figma 将图像导出为 SVG，它结合了其他 11 个图像来制作这个拼贴画。它不会在 Safari 上呈现。在我的 MacBook 和 iPhone 上都没有，但在 Chrome 上渲染得很好。怎么了？这是从 Figma 导出后的原始文件：

这是 SVG 代码和一些图像编码：

<svg width="1440" height="1107" viewBox="0 0 1440 1107" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g clip-path="url(#clip0_1330_2263)">
    <g style="mix-blend-mode:plus-darker">
      <rect x="235.569" y="450.289" width="514.624" height="514.624" transform="rotate(-30 235.569 450.289)" fill="url(#pattern0_1330_2263)" />
      <rect x="235.569" y="450.289" width="514.624" height="514.624" transform="rotate(-30 235.569 450.289)" fill="black" fill-opacity="0.5" />
    </g>
    <g style="mix-blend-mode:plus-darker">
      <rect x="1178.27" y="-93.979" width="514.624" height="514.624" transform="rotate(-30 1178.27 -93.979)" fill="url(#pattern1_1330_2263)" />
      <rect x="1178.27" y="-93.979" width="514.624" height="514.624" transform="rotate(-30 1178.27 -93.979)" fill="black" fill-opacity="0.5" />
    </g>
    <g style="mix-blend-mode:plus-darker">
      <rect x="-340.128" y="541.688" width="514.624" height="514.624" transform="rotate(-30 -340.128 541.688)" fill="url(#pattern2_1330_2263)" />
      <rect x="-340.128" y="541.688" width="514.624" height="514.624" transform="rotate(-30 -340.128 541.688)" fill="black" fill-opacity="0.5" />
    </g>
    <g style="mix-blend-mode:plus-darker">
      <rect x="602.572" y="-2.58044" width="514.624" height="514.624" transform="rotate(-30 602.572 -2.58044)" fill="url(#pattern3_1330_2263)" />
      <rect x="602.572" y="-2.58044" width="514.624" height="514.624" transform="rotate(-30 602.572 -2.58044)" fill="black" fill-opacity="0.5" />
    </g>
    <g style="mix-blend-mode:plus-darker">
      <rect x="511.261" y="927.801" width="514.624" height="514.624" transform="rotate(-30 511.261 927.801)" fill="url(#pattern4_1330_2263)" />
      <rect x="511.261" y="927.801" width="514.624" height="514.624" transform="rotate(-30 511.261 927.801)" fill="black" fill-opacity="0.5" />
    </g>
    <g style="mix-blend-mode:plus-darker">
      <rect x="-64.4355" y="1019.2" width="514.624" height="514.624" transform="rotate(-30 -64.4355 1019.2)" fill="url(#pattern5_1330_2263)" />
      <rect x="-64.4355" y="1019.2" width="514.624" height="514.624" transform="rotate(-30 -64.4355 1019.2)" fill="black" fill-opacity="0.5" />
    </g>
    <g style="mix-blend-mode:plus-darker">
      <rect x="878.264" y="474.931" width="514.624" height="514.624" transform="rotate(-30 878.264 474.931)" fill="url(#pattern6_1330_2263)" />
      <rect x="878.264" y="474.931" width="514.624" height="514.624" transform="rotate(-30 878.264 474.931)" fill="black" fill-opacity="0.5" />
    </g>
    <g style="mix-blend-mode:plus-darker">
      <rect x="1153.96" y="952.443" width="514.624" height="514.624" transform="rotate(-30 1153.96 952.443)" fill="url(#pattern7_1330_2263)" />
      <rect x="1153.96" y="952.443" width="514.624" height="514.624" transform="rotate(-30 1153.96 952.443)" fill="black" fill-opacity="0.5" />
    </g>
    <g style="mix-blend-mode:plus-darker">
      <rect x="-40.1211" y="-27.2223" width="514.624" height="514.624" transform="rotate(-30 -40.1211 -27.2223)" fill="url(#pattern8_1330_2263)" />
      <rect x="-40.1211" y="-27.2223" width="514.624" height="514.624" transform="rotate(-30 -40.1211 -27.2223)" fill="black" fill-opacity="0.5" />
    </g>
    <g style="mix-blend-mode:plus-darker">
      <rect x="-615.819" y="64.1766" width="514.624" height="514.624" transform="rotate(-30 -615.819 64.1766)" fill="url(#pattern9_1330_2263)" />
      <rect x="-615.819" y="64.1766" width="514.624" height="514.624" transform="rotate(-30 -615.819 64.1766)" fill="black" fill-opacity="0.5" />
    </g>
  </g>
  <defs>
    <pattern id="pattern0_1330_2263" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image0_1330_2263" transform="translate(-0.43633) scale(0.000749064)" />
    </pattern>
    <pattern id="pattern1_1330_2263" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image1_1330_2263" transform="translate(-0.2494) scale(0.00059952)" />
    </pattern>
    <pattern id="pattern2_1330_2263" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image2_1330_2263" transform="translate(-0.248976) scale(0.000585138)" />
    </pattern>
    <pattern id="pattern3_1330_2263" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image3_1330_2263" transform="translate(0 -0.16625) scale(0.0025)" />
    </pattern>
    <pattern id="pattern4_1330_2263" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image4_1330_2263" transform="translate(-0.251252) scale(0.000834725)" />
    </pattern>
    <pattern id="pattern5_1330_2263" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image5_1330_2263" transform="translate(-0.166667) scale(0.000520833)" />
    </pattern>
    <pattern id="pattern6_1330_2263" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image6_1330_2263" transform="translate(-0.248895) scale(0.000736377)" />
    </pattern>
    <pattern id="pattern7_1330_2263" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image7_1330_2263" transform="scale(0.00132979)" />
    </pattern>
    <pattern id="pattern8_1330_2263" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image8_1330_2263" transform="translate(0 -0.16625) scale(0.0025)" />
    </pattern>
    <pattern id="pattern9_1330_2263" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image9_1330_2263" transform="translate(-0.248663) scale(0.0013369)" />
    </pattern>
    <clipPath id="clip0_1330_2263">
      <rect width="1513" height="1107" fill="white" transform="translate(-6)" />
    </clipPath>
    <image id="image0_1330_2263" width="2500" height="1335" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA8ADwAAD/7QCOUGhvdG9zaG9w

Answer 1

这可能是由于 Safari 对 Base64 编码图像和

xlink:href

的处理。

将

xlink:href

元素中的

href

替换为

<use>

：

<use href="#image0_1330_2263" transform="translate(-0.43633) scale(0.000749064)" />