动态JavaScript中创建与操作SVG元素的教程

const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
const SVG_XLINK_NAMESPACE = "http://www.w3.org/1999/xlink";

// 创建SVG元素
const svg = document.createElementNS(SVG_NAMESPACE, "svg");
svg.setAttribute("viewBox", "0 0 482.026 172.554");
svg.setAttribute("width", "482.026");
svg.setAttribute("height", "172.554");
svg.setAttribute("id", "dynamicSvg");
svg.setAttribute("xmlns", SVG_NAMESPACE);
svg.setAttribute("xmlns:xlink", SVG_XLINK_NAMESPACE);

// 将SVG添加到DOM中（例如，添加到body）
document.body.appendChild(svg);

// 创建defs元素
const defs = document.createElementNS(SVG_NAMESPACE, "defs");
svg.appendChild(defs);

// 创建一个filter元素
const filterOuter = document.createElementNS(SVG_NAMESPACE, "filter");
filterOuter.setAttribute("id", "layerOuter");
filterOuter.setAttribute("x", "0");
filterOuter.setAttribute("y", "35.6");
filterOuter.setAttribute("width", "364.473");
filterOuter.setAttribute("height", "100.059");
filterOuter.setAttribute("filterUnits", "userSpaceOnUse");
defs.appendChild(filterOuter);

// 添加滤镜原语（feOffset, feGaussianBlur, feFlood, feComposite）
const feOffsetOuter = document.createElementNS(SVG_NAMESPACE, "feOffset");
feOffsetOuter.setAttribute("dy", "3");
feOffsetOuter.setAttribute("input", "SourceAlpha");
filterOuter.appendChild(feOffsetOuter);

const feGaussianBlurOuter = document.createElementNS(SVG_NAMESPACE, "feGaussianBlur");
feGaussianBlurOuter.setAttribute("stdDeviation", "3");
feGaussianBlurOuter.setAttribute("result", "blur");
filterOuter.appendChild(feGaussianBlurOuter);

const feFloodOuter = document.createElementNS(SVG_NAMESPACE, "feFlood");
feFloodOuter.setAttribute("flood-opacity", "0.459");
filterOuter.appendChild(feFloodOuter);

const feCompositeOuter = document.createElementNS(SVG_NAMESPACE, "feComposite");
feCompositeOuter.setAttribute("operator", "in");
feCompositeOuter.setAttribute("in2", "blur");
filterOuter.appendChild(feCompositeOuter);

const feCompositeOuter2 = document.createElementNS(SVG_NAMESPACE, "feComposite");
feCompositeOuter2.setAttribute("in", "SourceGraphic");
filterOuter.appendChild(feCompositeOuter2);

// 您可以根据需要继续添加其他filter，例如layerBase
// ... (此处省略 layerBase 滤镜的创建，与 layerOuter 类似)

// 创建一个g元素（分组）
const gMenu = document.createElementNS(SVG_NAMESPACE, "g");
gMenu.setAttribute("id", "frmMenu");
gMenu.setAttribute("transform", "translate(-1395.974 -860.8)");
svg.appendChild(gMenu);

// 创建一个path元素
const pathLayerOuter = document.createElementNS(SVG_NAMESPACE, "path");
pathLayerOuter.setAttribute("id", "layerOuter-2");
pathLayerOuter.setAttribute("data-name", "layerOuter");
// 重要的d属性，定义路径形状
pathLayerOuter.setAttribute("d", "M730.735,40.209q-.821-5.562-7.2-5.562H398.941q-6.382,0-7.112,5.562l-.182,1.732v60.177q0,7.294,7.294,7.294h324.59q7.294,0,7.294-7.294V41.941l-.091-1.732M388,102.574V41.941Q388,31,398.941,31h324.59q10.941,0,10.941,10.941v60.633q-.273,10.485-10.941,10.485H398.941q-10.668,0-10.941-10.485");
pathLayerOuter.setAttribute("transform", "translate(-379 10.6)");
pathLayerOuter.setAttribute("fill", "#9b9dad");
// 引用之前定义的滤镜
pathLayerOuter.setAttribute("filter", "url(#layerOuter)");
gMenu.appendChild(pathLayerOuter);

// 继续创建其他g和path元素，并嵌套它们
// 例如，创建另一个g元素
const btnGroupLayers = document.createElementNS(SVG_NAMESPACE, "g");
btnGroupLayers.setAttribute("id", "btnGroupLayers");
btnGroupLayers.setAttribute("transform", "translate(0 -9)");
gMenu.appendChild(btnGroupLayers);

// 在btnGroupLayers中创建LayerBar组
const layerBar = document.createElementNS(SVG_NAMESPACE, "g");
layerBar.setAttribute("id", "LayerBar");
btnGroupLayers.appendChild(layerBar);

// 然后在layerBar中添加更多路径等
const pathLayerMid = document.createElementNS(SVG_NAMESPACE, "path");
pathLayerMid.setAttribute("id", "layerMid");
pathLayerMid.setAttribute("d", "M729.088,38.562l.091,1.732v60.177q0,7.294-7.294,7.294H397.294q-7.294,0-7.294-7.294V40.294l.182-1.732Q390.912,33,397.294,33h324.59q6.382,0,7.2,5.562m-3.556,1.732-.091-1.276.091.091q-.638-2.462-3.647-2.462H463.853l-5.106,5.106-5.106-5.106h-17.05l-4.1,4.1-4.1-4.1H397.294q-3.009,0-3.465,2.371l-.091.365-.091.912V83.877l5.015,5.015-5.015,5.015v6.565q0,3.647,3.647,3.647H564.878l5.015-5.015,5.015,5.015H652.5l2.827-2.826,2.826,2.826h63.733q3.647,0,3.647-3.647V58.712l-4.377-4.376,4.377-4.377V40.294");
pathLayerMid.setAttribute("transform", "translate(1018.621 882.048)");
pathLayerMid.setAttribute("fill", "#727685");
layerBar.appendChild(pathLayerMid);

async function loadAndManipulateSVG(svgFilePath) {
  try {
    // 1. 使用fetch API获取SVG文件内容
    const response = await fetch(svgFilePath);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const svgText = await response.text();

    // 2. 使用DOMParser将SVG文本解析为DOM对象
    const parser = new DOMParser();
    const svgDocument = parser.parseFromString(svgText, 'image/svg+xml');

    // 获取SVG的根元素
    const rootSvgElement = svgDocument.documentElement;

    // 3. 在添加到DOM之前进行操作（可选）
    // 示例：将所有填充色为 #838796 的元素改为绿色
    rootSvgElement.querySelectorAll('[fill="#838796"]').forEach(element => {
      element.setAttribute('fill', 'green');
    });

    // 4. 将解析后的SVG根元素添加到当前文档的DOM中
    // 注意：这里appendChild会将整个SVG元素及其所有子元素添加到DOM
    document.body.appendChild(rootSvgElement);

    // 5. 添加到DOM之后继续操作（可选）
    // 示例：将所有填充色为 #b1a077 的元素改为红色
    rootSvgElement.querySelectorAll('[fill="#b1a077"]').forEach(element => {
      element.setAttribute('fill', 'red');
    });

  } catch (error) {
    console.error("加载或操作SVG时发生错误:", error);
  }
}

// 调用函数加载SVG
loadAndManipulateSVG("./image.svg");