Microsoft Edge无法渲染带遮罩的SVG问题求助

我明白你的需求：通过SVG遮罩实现加载一次图标后在客户端修改颜色，这个方案在其他浏览器正常但Edge失效，而且必须保持从服务加载SVG、不能转PNG。下面是几个针对性的解决方案，按推荐优先级排序：

1. 修复SVG命名空间和版本问题 #

Edge对SVG 1.2的支持不够完善，而且你的主SVG缺少xlink命名空间声明，这会导致xlink:href无法被正确解析。修改主HTML中的SVG标签：

<svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="icon">
      <image xlink:href="./icon.svg" width="100%" height="100%" />
    </mask>
  </defs>
  <rect fill="red" mask="url(#icon)" width="100%" height="100%" />
</svg>

• 把version从1.2降级到1.1（Edge对SVG 1.1支持更稳定）
• 添加xmlns:xlink="http://www.w3.org/1999/xlink"命名空间，确保xlink:href属性被识别

2. 确保外部SVG加载完成后再渲染 #

Edge可能会在外部SVG还未加载完成时就渲染遮罩，导致遮罩为空。可以用JavaScript监听外部SVG的加载状态，延迟显示主SVG：

<!DOCTYPE html>
<html>
<head>
  <script>
    window.addEventListener('load', () => {
      const maskImage = document.querySelector('#icon image');
      const mainSvg = document.querySelector('svg');
      
      // 默认隐藏主SVG
      mainSvg.style.display = 'none';

      maskImage.addEventListener('load', () => {
        // 外部SVG加载完成后显示主SVG
        mainSvg.style.display = 'block';
      });

      maskImage.addEventListener('error', () => {
        console.error('图标SVG加载失败');
      });
    });
  </script>
</head>
<body>
  <svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <mask id="icon">
        <image xlink:href="./icon.svg" width="100%" height="100%" />
      </mask>
    </defs>
    <rect fill="red" mask="url(#icon)" width="100%" height="100%" />
  </svg>
</body>
</html>

3. 动态加载并内联SVG内容（最可靠方案） #

如果前两种方法都无效，直接通过AJAX加载外部SVG的内容，将其插入到遮罩中，完全避免Edge对image元素作为遮罩源的兼容性问题：

<!DOCTYPE html>
<html>
<head>
  <script>
    window.addEventListener('load', async () => {
      try {
        // 从服务加载SVG内容
        const response = await fetch('./icon.svg');
        const svgContent = await response.text();
        
        // 解析SVG并提取内部元素
        const parser = new DOMParser();
        const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml');
        const iconElements = svgDoc.querySelector('svg').innerHTML;
        
        // 将元素插入到遮罩中
        document.getElementById('icon').innerHTML = iconElements;
      } catch (err) {
        console.error('加载或解析图标SVG失败:', err);
      }
    });
  </script>
</head>
<body>
  <svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <mask id="icon">
        <!-- 动态插入SVG内容 -->
      </mask>
    </defs>
    <rect fill="red" mask="url(#icon)" width="100%" height="100%" />
  </svg>
</body>
</html>

这个方案不仅解决了Edge的兼容性问题，还能保证后续图标更新时自动获取最新版本，完全符合你的需求。

额外注意事项 #

• 检查CORS设置：如果图标SVG是从不同域名加载的，确保服务器配置了正确的CORS响应头，允许当前域名访问
• 外部SVG的fill颜色：你的外部SVG用的是#ffffff，作为遮罩时白色会显示遮罩内容，黑色会隐藏，这个设置是正确的

内容的提问来源于stack exchange，提问作者SPW