SVG Sprite中LinearGradient在Safari无法正常显示问题求助

以下是几个经过验证的、能保留Sprite方式解决Safari渐变显示问题的方案：

• 确保渐变完全包裹在Sprite的<defs>内，引用路径准确
  Safari对Sprite中渐变的引用规则比其他浏览器严格，必须将所有渐变定义放在Sprite根标签内的<defs>里，且图标中的fill="url(#渐变ID)"必须完全匹配渐变的ID，不能使用相对路径或省略ID前缀。示例代码：

  <!-- SVG Sprite 文件内容 -->
  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <defs>
      <linearGradient id="icon-red-blue" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#ff0000"/>
        <stop offset="100%" stop-color="#0000ff"/>
      </linearGradient>
    </defs>
    <symbol id="icon-arrow" viewBox="0 0 24 24">
      <path d="M4 12l8 8 8-8" fill="url(#icon-red-blue)"/>
    </symbol>
  </svg>
  

• 添加SVG命名空间兼容旧版Safari
  部分旧版Safari对SVG的命名空间支持不完善，在Sprite的根<svg>标签中添加xmlns:xlink="http://www.w3.org/1999/xlink"属性，同时在引用渐变时保留xlink:href属性（和fill配合做兼容）：

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
    <defs>
      <linearGradient id="icon-red-blue" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#ff0000"/>
        <stop offset="100%" stop-color="#0000ff"/>
      </linearGradient>
    </defs>
    <symbol id="icon-arrow" viewBox="0 0 24 24">
      <path d="M4 12l8 8 8-8" fill="url(#icon-red-blue)" xlink:href="#icon-red-blue"/>
    </symbol>
  </svg>
  

• 保证渐变ID全局唯一
  如果Sprite中包含多个渐变，必须确保每个渐变的ID不重复。Safari在处理重复ID时会优先匹配第一个定义的渐变，导致后续图标无法正确引用目标渐变。

• 等待Sprite加载完成后再渲染图标
  Safari可能在Sprite资源未完全加载时就渲染引用的图标，导致渐变无法被解析。可以通过JS监听Sprite的加载状态，完成后再显示图标：

  const spriteElement = document.getElementById('svg-sprite');
  function renderIcons() {
    document.querySelectorAll('.svg-icon').forEach(icon => icon.style.display = 'inline-block');
  }
  if (spriteElement.complete) {
    renderIcons();
  } else {
    spriteElement.addEventListener('load', renderIcons);
  }
  

• 检查SVG压缩工具的优化规则
  部分SVG压缩工具会误删<defs>标签或修改渐变的引用结构，导致Safari无法识别渐变。可以尝试关闭压缩工具对渐变相关代码的优化，或者手动校验压缩后的Sprite文件结构是否完整。

内容的提问来源于stack exchange，提问作者Воронович Юлия