本教程详细介绍了如何在纯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"); // 建议使用更具描述性的IDsvg.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设置其属性。
立即学习“Java免费学习笔记（深入）”；
// 创建 defs 元素const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");// 创建第一个滤镜：layerOuterconst 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");// 将滤镜基元添加到 filterOuterfilterOuter.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)// 将滤镜添加到 defsdefs.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来修改其内容
以上就是在JavaScript中动态操作SVG：从XML到DOM对象的转换与应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1594525.html
微信扫一扫 
支付宝扫一扫 
