figma导出svg无法在safari显示问题修复

背景：

从figma导出svg图像代码时，有一段filter标签内的代码，由于这一段filter，导致图像无法在safari浏览器上正常显示。

<filter
        id="filter0_b_58_468"
        x={-27.3539}
        y={-25.9372}
        width={217.632}
        height={349.963}
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feGaussianBlur in="BackgroundImage" stdDeviation={16.3265} />
        <feComposite
          in2="SourceAlpha"
          operator="in"
          result="effect1_backgroundBlur_58_468"
        />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="effect1_backgroundBlur_58_468"
          result="shape"
        />
</filter>

原因：

filter中有个高斯模糊的标签，其中的in="BackgroundImage"出现了不兼容的问题，BackgroundImage在现代浏览器中都还没有做到兼容，chrome属于是超前支持了这个属性，所以导致在其他浏览器无法正常显示的情况。

后期处理：

由于图像在修改backgroundimage后依然可以正常显示，因此未做特殊兼容

如需特别处理，参考资料如下：

Workaround for BackgroundImage

<div style="width: 420px; height: 220px;">
<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="backgroundMultiply">
      <!-- This will not work. -->
      <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/>
    </filter>
  </defs>
  <image xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/>
  <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" />
</svg>

<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="imageMultiply">
      <!-- This is a workaround. -->
      <feImage xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/>
      <feBlend in2="SourceGraphic" mode="multiply"/>
    </filter>
  </defs>
  <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/>
</svg>
</div>