支持跨域及fill等属性的嵌套SVG实现方案求助

方案1：预获取跨域SVG资源后内联（最稳定，无CORS限制） #

该方案先通过fetch请求拉取跨域SVG的完整文本，插入到当前SVG的defs中封装为可复用的symbol，后续直接用<use>引用即可，完全规避CORS问题，同时支持所有SVG属性（包括fillRule、自定义fill等）。
React环境下的实现代码示例：

import { useEffect, useState } from 'react';

const CrossOriginSvgIcon = ({ iconName, fill = "#9e9e9e" }) => {
  const [iconSvgContent, setIconSvgContent] = useState(null);

  useEffect(() => {
    const fetchSvg = async () => {
      const iconUrl = IconSet[iconName];
      try {
        const res = await fetch(iconUrl);
        const svgText = await res.text();
        // 提取原SVG内容，包装为带对应id的symbol
        const processedSvg = svgText.replace(
          /<svg([^>]*)>/,
          `<symbol id="${iconName}" $1>`
        ).replace('</svg>', '</symbol>');
        setIconSvgContent(processedSvg);
      } catch (e) {
        console.error('SVG加载失败', e);
      }
    };
    fetchSvg();
  }, [iconName]);

  if (!iconSvgContent) return null;

  return (
    <svg>
      {/* 内联加载到的跨域SVG资源 */}
      <defs dangerouslySetInnerHTML={{ __html: iconSvgContent }} />
      <use 
        href={`#${iconName}`} 
        fillRule="evenodd" 
        fill={fill}
      />
    </svg>
  );
};

只要跨域SVG的服务端配置了允许GET请求的CORS头，该方案即可正常运行。

方案2：配置跨域资源服务端CORS规则（可控制服务端时优先选择） #

如果可以修改跨域SVG存放服务端的配置，直接给SVG资源的响应头添加Access-Control-Allow-Origin: 你的站点域名，即可直接使用原生<use>标签引用，不需要修改现有代码逻辑，实现成本最低。

方案3：转Blob URL适配原有<use>写法 #

如果不想内联SVG内容，可以将fetch到的SVG转换为Blob对象，生成同域的Object URL后再用<use>引用：

import { useEffect, useState } from 'react';

const CrossOriginSvgIcon = ({ iconName }) => {
  const [objectUrl, setObjectUrl] = useState(null);

  useEffect(() => {
    let tempUrl = '';
    const loadSvg = async () => {
      try {
        const res = await fetch(IconSet[iconName]);
        const blob = await res.blob();
        tempUrl = URL.createObjectURL(blob);
        setObjectUrl(tempUrl);
      } catch (e) {
        console.error('SVG加载失败', e);
      }
    };
    loadSvg();
    // 组件卸载时清理资源避免内存泄漏
    return () => tempUrl && URL.revokeObjectURL(tempUrl);
  }, [iconName]);

  if (!objectUrl) return null;

  return (
    <svg>
      <use 
        xlinkHref={`${objectUrl}#${iconName}`} 
        fillRule="evenodd" 
        fill="#9e9e9e" 
      />
    </svg>
  );
};

该方案可以保留原有<use>写法逻辑，不需要大幅调整现有代码。

补充：跨域服务端不允许配置CORS的场景 #

可以在你的业务服务端增加一层代理接口转发SVG请求，前端请求同域的代理接口拿到SVG内容后，再用上述任意方案处理即可，完全规避跨域限制。

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