如何通过CDN URL加载SVG并使用CSS类实现自定义填充色？

针对你遇到的CDN SVG自定义填充色问题，这里有几个可行的方案：

1. Fetch SVG内容并内联渲染（推荐） #

直接通过fetch获取CDN上的SVG文本内容，将其转换为可操作的DOM元素后，添加你的填充色工具类，再插入到页面中。这种方式能完全控制SVG的样式，不受跨域限制（前提是CDN允许CORS请求，若不允许可通过后端代理转发）。

示例代码：

async function renderCustomSVG(cdnURL, fillColorClass) {
  try {
    const response = await fetch(cdnURL);
    const svgText = await response.text();
    // 创建DOM解析器处理SVG文本
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
    const svgElement = svgDoc.querySelector('svg');
    
    // 添加填充色工具类
    svgElement.classList.add(fillColorClass);
    
    // 移除SVG元素中硬编码的fill属性（避免覆盖工具类样式）
    const svgChildren = svgElement.querySelectorAll('[fill]');
    svgChildren.forEach(el => {
      if (!['currentColor', 'inherit'].includes(el.getAttribute('fill'))) {
        el.setAttribute('fill', 'inherit');
      }
    });
    
    // 将处理后的SVG插入页面容器
    document.getElementById('svg-container').appendChild(svgElement);
  } catch (error) {
    console.error('加载SVG失败:', error);
  }
}

// 调用示例
renderCustomSVG('https://your-cdn.com/icon.svg', 'color__fill--black');

2. 利用