JS操作SVG：XML转DOM教程详解

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《JS动态操作SVG：XML转DOM实用教程》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

本教程详细介绍了如何在纯JavaScript环境中动态创建和操作SVG图形。文章首先探讨了使用`createElementNS`手动构建SVG元素的方法，适用于小型或动态生成的SVG。随后，重点讲解了通过`fetch` API获取外部SVG文件内容，并利用`DOMParser`将其解析为可操作的DOM对象，从而实现对SVG元素的属性修改、样式调整及交互性增强。教程强调了跨域资源共享（CORS）的重要性，并提供了清晰的代码示例和实践建议，帮助开发者高效地在Web应用中集成和控制SVG。

在现代Web开发中，SVG（可缩放矢量图形）因其矢量特性、小文件大小和高可伸缩性而广受欢迎。然而，直接在HTML中嵌入SVG或从外部文件加载SVG后，有时需要通过JavaScript进行动态修改和交互。本教程将深入探讨如何使用纯JavaScript（Vanilla JavaScript）动态地创建、加载并操作SVG图形，从而实现更灵活和强大的视觉效果。我们将介绍两种主要方法：手动构建SVG元素和通过解析现有SVG文件进行操作。

一、手动创建SVG元素

当需要从零开始生成简单的SVG图形，或者SVG结构相对固定且复杂性不高时，可以使用JavaScript的DOM API手动创建SVG元素。这种方法的核心是使用document.createElementNS函数，它允许我们指定元素的命名空间，这对于SVG元素至关重要（SVG的命名空间是http://www.w3.org/2000/svg）。

1. 创建SVG根元素

首先，我们需要创建一个svg根元素，并设置其基本属性，如viewBox、width、height以及必要的命名空间。

// 创建一个 SVG 元素
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 482.026 172.554");
svg.setAttribute("width", "482.026");
svg.setAttribute("height", "172.554");
svg.setAttribute("id", "myDynamicSvg"); // 建议使用更具描述性的ID
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");

// 将 SVG 元素添加到页面中的某个容器
document.body.appendChild(svg); // 例如添加到 body

2. 添加defs和filter元素

SVG中的defs元素用于定义可重用的图形对象，例如滤镜（filter）。滤镜内部包含一系列的滤镜基元（feOffset, feGaussianBlur, feFlood, feComposite等），它们共同作用于图形以产生视觉效果。创建这些元素同样需要createElementNS，并通过setAttribute设置其属性。

// 创建 defs 元素
const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");

// 创建第一个滤镜：layerOuter
const filterOuter = document.createElementNS("http://www.w3.org/2000/svg", "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");

// 创建 feOffset 元素
const feOffsetOuter = document.createElementNS("http://www.w3.org/2000/svg", "feOffset");
feOffsetOuter.setAttribute("dy", "3");
feOffsetOuter.setAttribute("input", "SourceAlpha");

// 创建 feGaussianBlur 元素
const feGaussianBlurOuter = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur");
feGaussianBlurOuter.setAttribute("stdDeviation", "3");
feGaussianBlurOuter.setAttribute("result", "blur");

// 创建 feFlood 元素
const feFloodOuter = document.createElementNS("http://www.w3.org/2000/svg", "feFlood");
feFloodOuter.setAttribute("flood-opacity", "0.459");

// 创建 feComposite 元素 (in2="blur")
const feCompositeOuter = document.createElementNS("http://www.w3.org/2000/svg", "feComposite");
feCompositeOuter.setAttribute("operator", "in");
feCompositeOuter.setAttribute("in2", "blur");

// 创建 feComposite 元素 (in="SourceGraphic")
const feCompositeOuter2 = document.createElementNS("http://www.w3.org/2000/svg", "feComposite");
feCompositeOuter2.setAttribute("in", "SourceGraphic");

// 将滤镜基元添加到 filterOuter
filterOuter.appendChild(feOffsetOuter);
filterOuter.appendChild(feGaussianBlurOuter);
filterOuter.appendChild(feFloodOuter);
filterOuter.appendChild(feCompositeOuter);
filterOuter.appendChild(feCompositeOuter2);

// 创建第二个滤镜：layerBase (此处为简化，省略具体创建和设置过程，逻辑与 layerOuter 类似)
const filterBase = document.createElementNS("http://www.w3.org/2000/svg", "filter");
filterBase.setAttribute("id", "layerBase");
filterBase.setAttribute("x", "0");
filterBase.setAttribute("y", "107.175");
filterBase.setAttribute("width", "364.473");
filterBase.setAttribute("height", "35.78");
filterBase.setAttribute("filterUnits", "userSpaceOnUse");
// ... (添加 feOffsetBase, feGaussianBlurBase, feFloodBase, feCompositeBase, feCompositeBase2)

// 将滤镜添加到 defs
defs.appendChild(filterOuter);
defs.appendChild(filterBase);

// 将 defs 添加到 svg 根元素
svg.appendChild(defs);

3. 创建g和path元素

g元素用于将多个SVG图形元素进行分组，方便统一应用变换或样式。path元素则用于绘制复杂的形状。它们的创建方式与上述元素相同，关键在于正确设置属性，特别是path元素的d（data）属性，它定义了路径的形状。

// 示例：创建分组 g 元素
const gElement = document.createElementNS("http://www.w3.org/2000/svg", "g");
gElement.setAttribute("id", "frmMenu");
gElement.setAttribute("transform", "translate(-1395.974 -860.8)"); // 应用变换

// 示例：创建 path 元素
const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathElement.setAttribute("id", "layerOuter-2");
pathElement.setAttribute("data-name", "layerOuter");
pathElement.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");
pathElement.setAttribute("transform", "translate(-379 10.6)");
pathElement.setAttribute("fill", "#9b9dad");
pathElement.setAttribute("filter", "url(#layerOuter)"); // 引用定义的滤镜

// 将 path 元素添加到 g 元素
gElement.appendChild(pathElement);
// 将 g 元素添加到 svg 根元素
svg.appendChild(gElement);

手动创建方法的局限性： 手动创建SVG元素对于复杂的图形来说会非常冗长和易错。每次修改SVG结构都需要手动调整JavaScript代码，维护成本高。因此，对于现有SVG文件的动态操作，通常推荐使用第二种方法。

二、通过解析现有SVG文件动态操作

更常见且高效的方法是加载一个现有的SVG文件，将其解析为DOM对象，然后使用标准的DOM操作API来修改其内容

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~