使用原生JavaScript动态操作SVG：从外部文件到DOM操控

async function loadAndManipulateSVG(svgUrl, targetElementId) {
  try {
    // 1. 使用fetch API获取SVG文件内容
    const response = await fetch(svgUrl);

    // 检查HTTP响应是否成功
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    // 将响应体解析为文本
    const svgText = await response.text();

    // ... 后续步骤
    return svgText;

  } catch (error) {
    console.error('加载SVG文件失败:', error);
    return null;
  }
}

// 示例调用
// loadAndManipulateSVG('./image.svg', 'svg-container');

// 承接上一步的函数
async function loadAndManipulateSVG(svgUrl, targetElementId) {
  // ... (获取svgText的代码)

  if (svgText) {
    // 2. 使用DOMParser将SVG文本解析为DOM对象
    const parser = new DOMParser();
    // 关键：指定MIME类型为 'image/svg+xml'
    const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');

    // 获取解析后的SVG根元素
    const svgRoot = svgDoc.documentElement;

    // 检查解析是否成功，例如是否存在parsererror
    if (svgRoot.querySelector('parsererror')) {
      console.error('SVG解析错误:', svgRoot.querySelector('parsererror').textContent);
      return null;
    }

    // ... 后续步骤
    return svgRoot;
  }
  return null;
}

// 承接上一步的函数
async function loadAndManipulateSVG(svgUrl, targetElementId) {
  // ... (获取svgRoot的代码)

  if (svgRoot) {
    // 3. 访问和操作SVG元素
    // 示例：修改所有fill属性为特定值的path元素
    svgRoot.querySelectorAll('[fill="#838796"]').forEach(element => {
      element.setAttribute('fill', 'green'); // 将颜色改为绿色
      element.style.stroke = 'blue'; // 也可以直接修改CSS样式
    });

    // 示例：查找特定ID的元素并修改其transform
    const layerOuterPath = svgRoot.getElementById('layerOuter-2');
    if (layerOuterPath) {
      layerOuterPath.setAttribute('transform', 'translate(-379 20)'); // 向上移动
    }

    // ... 后续步骤
    return svgRoot;
  }
  return null;
}

// 完整的loadAndManipulateSVG函数
async function loadAndManipulateSVG(svgUrl, targetElementId) {
  try {
    const response = await fetch(svgUrl);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const svgText = await response.text();

    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
    const svgRoot = svgDoc.documentElement;

    if (svgRoot.querySelector('parsererror')) {
      console.error('SVG解析错误:', svgRoot.querySelector('parsererror').textContent);
      return;
    }

    // 在将SVG添加到DOM之前进行操作
    svgRoot.querySelectorAll('[fill="#838796"]').forEach(e => e.setAttribute('fill', 'green'));

    // 4. 将SVG添加到HTML文档
    const targetContainer = document.getElementById(targetElementId);
    if (targetContainer) {
      // 移除容器中可能存在的旧SVG，确保每次加载都是新的
      while (targetContainer.firstChild) {
        targetContainer.removeChild(targetContainer.firstChild);
      }
      targetContainer.appendChild(svgRoot);
      console.log('SVG已成功加载并添加到DOM。');

      // SVG添加到DOM后，仍然可以继续操作
      svgRoot.querySelectorAll('[fill="#b1a077"]').forEach(e => e.setAttribute('fill', 'red'));

    } else {
      console.error(`未找到ID为 ${targetElementId} 的目标容器。`);
    }

  } catch (error) {
    console.error('加载或操作SVG失败:', error);
  }
}

// 在HTML中创建一个容器元素
// <div id="svg-container"></div>

// 页面加载完成后调用函数
document.addEventListener('DOMContentLoaded', () => {
  loadAndManipulateSVG('./image.svg', 'svg-container');
});

// SVG命名空间常量
const SVG_NS = "http://www.w3.org/2000/svg";
const XLINK_NS = "http://www.w3.org/1999/xlink";

function createSVGElement(tagName, attributes = {}) {
  const element = document.createElementNS(SVG_NS, tagName);
  for (const key in attributes) {
    if (attributes.hasOwnProperty(key)) {
      // 特殊处理xlink:href属性
      if (key === 'xlink:href') {
        element.setAttributeNS(XLINK_NS, key, attributes[key]);
      } else {
        element.setAttribute(key, attributes[key]);
      }
    }
  }
  return element;
}

// 示例：创建SVG容器和部分defs
function generateCustomSVG() {
  const svg = createSVGElement("svg", {
    viewBox: "0 0 482.026 172.554",
    width: "482.026",
    height: "172.554",
    id: "generatedSvg",
    xmlns: SVG_NS,
    "xmlns:xlink": XLINK_NS // 注意这里xmlns:xlink作为属性名
  });

  const defs = createSVGElement("defs");

  // 创建一个filter元素
  const filterOuter = createSVGElement("filter", {
    id: "layerOuter",
    x: "0",
    y: "35.6",
    width: "364.473",
    height: "100.059",
    filterUnits: "userSpaceOnUse"
  });

  // 创建feOffset元素
  filterOuter.appendChild(createSVGElement("feOffset", {
    dy: "3",
    input: "SourceAlpha"
  }));
  // 创建feGaussianBlur元素
  filterOuter.appendChild(createSVGElement("feGaussianBlur", {
    stdDeviation: "3",
    result: "blur"
  }));
  // 创建feFlood元素
  filterOuter.appendChild(createSVGElement("feFlood", {
    "flood-opacity": "0.459"
  }));
  // 创建feComposite元素 (operator="in")
  filterOuter.appendChild(createSVGElement("feComposite", {
    operator: "in",
    in2: "blur"
  }));
  // 创建feComposite元素 (in="SourceGraphic")
  filterOuter.appendChild(createSVGElement("feComposite", {
    in: "SourceGraphic"
  }));

  defs.appendChild(filterOuter);
  svg.appendChild(defs);

  // 示例：添加一个简单的矩形
  const rect = createSVGElement("rect", {
    x: "50",
    y: "50",
    width: "100",
    height: "50",
    fill: "blue",
    stroke: "black",
    "stroke-width": "2"
  });
  svg.appendChild(rect);

  return svg;
}

// 将生成的SVG添加到页面
document.addEventListener('DOMContentLoaded', () => {
  const customSvg = generateCustomSVG();
  document.body.appendChild(customSvg);
});