本教程将详细介绍如何在原生javascript中动态生成和修改svg图形。我们将探讨两种核心方法：一是使用`createelementns`从零开始构建svg元素及其内部结构，二是获取并解析现有svg字符串，然后通过dom操作进行修改。文章将提供详细代码示例，并讨论关键注意事项，帮助开发者在web应用中灵活控制svg内容。
引言
可伸缩矢量图形（SVG）是Web上强大的图像格式，它基于XML，允许使用JavaScript进行高度的交互和动态操作。与位图图像不同，SVG可以无损缩放，并且其每个组成部分都是一个DOM元素，这意味着我们可以像操作HTML元素一样操作SVG元素。本教程将深入探讨两种在Vanilla JavaScript中创建和修改SVG的方法，以满足不同的开发需求。
方法一：使用JavaScript从零构建SVG
当需要完全控制SVG的生成过程，或者需要根据应用程序状态动态生成复杂图形时，从零开始构建SVG元素是一种有效的方法。这主要通过document.createElementNS函数实现，该函数允许在指定的命名空间内创建元素。
1. 创建SVG根元素
首先，我们需要创建一个根元素，并设置其基本属性，如viewBox、width、height以及必要的命名空间。
// 定义SVG命名空间const SVG_NAMESPACE = "http://www.w3.org/2000/svg";const 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", XLINK_NAMESPACE);// 将SVG添加到文档的某个位置，例如bodydocument.body.appendChild(svg);
2. 定义defs和filter
SVG中的元素用于存储可复用的图形对象，如滤镜、渐变等。元素则定义了应用于其他SVG元素的滤镜效果。在JavaScript中创建这些元素与创建SVG根元素类似。
立即学习“Java免费学习笔记（深入）”；
// 创建 元素const defs = document.createElementNS(SVG_NAMESPACE, "defs");svg.appendChild(defs);// 创建第一个滤镜：layerOuterconst 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");// 创建滤镜原语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);defs.appendChild(filterOuter);// 创建第二个滤镜：layerBase (代码结构与layerOuter类似，此处省略详细创建过程以保持简洁)const filterBase = document.createElementNS(SVG_NAMESPACE, "filter");filterBase.setAttribute("id", "layerBase");// ... 设置其他属性和子元素defs.appendChild(filterBase);
3. 构建g和path元素
元素用于组合相关的SVG图形元素，方便进行统一的变换或应用样式。元素则是SVG中最强大的图形元素之一，它允许绘制任意复杂的形状。
// 创建一个主分组 元素const mainGroup = document.createElementNS(SVG_NAMESPACE, "g");mainGroup.setAttribute("id", "frmMenu");mainGroup.setAttribute("transform", "translate(-1395.974 -860.8)");svg.appendChild(mainGroup);// 创建子分组 元素const btnGroupLayers = document.createElementNS(SVG_NAMESPACE, "g");btnGroupLayers.setAttribute("id", "btnGroupLayers");btnGroupLayers.setAttribute("transform", "translate(0 -9)");mainGroup.appendChild(btnGroupLayers);// 创建一个应用滤镜的 元素const layerBarGroup = document.createElementNS(SVG_NAMESPACE, "g");layerBarGroup.setAttribute("transform", "matrix(1, 0, 0, 1, 1395.97, 869.8)");layerBarGroup.setAttribute("filter", "url(#layerOuter)"); // 引用之前定义的滤镜btnGroupLayers.appendChild(layerBarGroup);// 创建一个 元素const pathOuter = document.createElementNS(SVG_NAMESPACE, "path");pathOuter.setAttribute("id", "layerOuter-2");pathOuter.setAttribute("data-name", "layerOuter");// 复杂的 d 属性数据通常从设计工具导出，直接复制即可pathOuter.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");pathOuter.setAttribute("transform", "translate(-379 10.6)");pathOuter.setAttribute("fill", "#9b9dad");layerBarGroup.appendChild(pathOuter);// 可以继续创建其他 和 元素，并按照层级关系进行嵌套和属性设置// 例如，创建 layerBase 相关的 和 const layerBaseGroup = document.createElementNS(SVG_NAMESPACE, "g");layerBaseGroup.setAttribute("transform", "matrix(1, 0, 0, 1, 1395.97, 869.8)");layerBaseGroup.setAttribute("filter", "url(#layerBase)");btnGroupLayers.appendChild(layerBaseGroup);const pathBase = document.createElementNS(SVG_NAMESPACE, "path");pathBase.setAttribute("id", "layerBase-2");pathBase.setAttribute("data-name", "layerBase");pathBase.setAttribute("d", "M734.473,70.25v6.838q0,10.941-10.941,10.941H398.941Q388,88.03,388,77.088V70.25q.274,10.485,10.941,10.485h324.59q10.668,0,10.941-10.485");pathBase.setAttribute("transform", "translate(-379 42.92)");pathBase.setAttribute("fill", "#616374");layerBaseGroup.appendChild(pathBase);// 创建 layerMid 和 layerInner 等其他路径const pathMid = document.createElementNS(SVG_NAMESPACE, "path");pathMid.setAttribute("id", "layerMid");pathMid.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");pathMid.setAttribute("transform", "translate(1018.621 882.048)");pathMid.setAttribute("fill", "#727685");btnGroupLayers.appendChild(pathMid);// ... 依此类推，创建所有剩余的 和 元素
方法二：获取并解析现有SVG进行操作
对于已经存在的复杂SVG文件，从零开始手动重写所有元素和属性是不切实际的。更高效的方法是获取SVG文件的内容（作为字符串），然后将其解析为DOM对象，最后通过DOM操作来修改它。
1. 获取SVG内容
使用fetch API可以异步获取SVG文件的内容。需要注意的是，如果SVG文件位于不同的域，可能会遇到跨域资源共享（CORS）问题。
/** * 异步获取SVG文件内容并解析为可操作的DOM元素 * @param {string} url SVG文件的URL * @returns {Promise} 解析后的SVG根元素 */async function loadAndParseSVG(url) { try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const svgText = await response.text(); // 使用 DOMParser 将 SVG 文本解析为 DOM 对象 const parser = new DOMParser(); const svgDocument = parser.parseFromString(svgText, 'image/svg+xml'); // 返回 SVG 根元素 return svgDocument.documentElement; } catch (error) { console.error("加载或解析SVG失败:", error); return null; }}
2. 解析SVG字符串为DOM
DOMParser接口可以将XML或HTML字符串解析为DOM Document对象。对于SVG，我们使用’image/svg+xml’作为MIME类型。
// 示例：假设我们有一个名为 'image.svg' 的文件// loadAndParseSVG('./image.svg').then(svgElement => {// if (svgElement) {// console.log("SVG已成功加载并解析:", svgElement);// // 此时 svgElement 就是可以操作的 根元素// }// });
3. 操作SVG元素
一旦SVG被解析为DOM对象，我们就可以使用标准的DOM操作方法（如querySelector、querySelectorAll、setAttribute、appendChild等）来修改其内容。
// 假设我们已经通过 loadAndParseSVG 获取到了 svgRootElementloadAndParseSVG('./image.svg').then(svgRootElement => { if (svgRootElement) { // 将解析后的SVG添加到文档中 document.body.appendChild(svgRootElement); // 示例操作1：修改所有特定填充色的路径 svgRootElement.querySelectorAll('[fill="#838796"]').forEach(element => { element.setAttribute('fill', 'green'); console.log(`元素 ${element.id} 的填充色已改为绿色。`); }); // 示例操作2：修改另一个特定填充色的路径 // 注意：即使元素已经添加到DOM，也可以继续对其进行操作 svgRootElement.querySelectorAll('[fill="#b1a077"]').forEach(element => { element.setAttribute('fill', 'red'); console.log(`元素 ${element.id} 的填充色已改为红色。`); }); // 示例操作3：修改某个特定ID的元素的transform属性 const frmMenu = svgRootElement.querySelector('#frmMenu'); if (frmMenu) { frmMenu.setAttribute('transform', 'translate(0 0)'); // 移除原始的负向位移 console.log("frmMenu 的 transform 属性已修改。"); } // 示例操作4：添加一个新的图形元素 const newCircle = document.createElementNS(SVG_NAMESPACE, "circle"); newCircle.setAttribute("cx", "50"); newCircle.setAttribute("cy", "50"); newCircle.setAttribute("r", "20"); newCircle.setAttribute("fill", "blue"); newCircle.setAttribute("stroke", "white"); newCircle.setAttribute("stroke-width", "2"); svgRootElement.appendChild(newCircle); console.log("已添加一个蓝色圆形。"); }});
关键注意事项
SVG命名空间
无论是创建还是操作SVG元素，始终要记住使用正确的SVG命名空间”http://www.w3.org/2000/svg”。这是区分SVG元素与HTML元素的关键。例如，document.createElement(‘svg’)会创建一个名为”svg”的HTML元素，而不是真正的SVG元素。
跨域资源共享 (CORS)
当使用fetch从外部URL加载SVG文件时，如果SVG文件与您的Web页面不在同一个域，浏览器会实施CORS策略。这意味着服务器必须在响应头中包含适当的CORS头（如Access-Control-Allow-Origin），否则fetch请求将失败。如果无法控制服务器，可以考虑将SVG内容直接嵌入HTML（通过标签或标签的src属性），或者将其转换为Base64编码的数据URI。
SVG属性设置
SVG属性通常通过setAttribute()方法设置，而不是像HTML元素那样直接访问属性（如element.id = ‘…’）。虽然某些SVG属性（如id）可以通过直接属性访问，但为了兼容性和避免潜在问题，推荐始终使用setAttribute()。特别是像transform、d、viewBox等复杂属性，必须使用setAttribute()。
性能考量
对于非常复杂的SVG或需要频繁进行大量DOM操作的场景，性能可能成为一个问题。在这些情况下，可以考虑以下优化策略：
批量操作：尽可能将多个DOM修改操作合并为一个。离线修改：在将SVG添加到DOM之前，先在内存中完成所有修改。CSS动画/变换：对于简单的动画和变换，CSS通常比JavaScript提供更好的性能。Web Workers：对于非常繁重的计算，可以考虑使用Web Workers来避免阻塞主线程。
总结
在Vanilla JavaScript中动态创建和操作SVG为Web开发者提供了极大的灵活性。无论是通过createElementNS从头构建，还是通过fetch和DOMParser解析现有SVG，这两种方法都允许我们以编程方式控制SVG的每一个细节。理解SVG的命名空间、属性设置以及潜在的CORS问题是成功实现动态SVG的关键。通过掌握这些技术，开发者可以创建出更具交互性和视觉吸引力的Web应用程序。
以上就是在Vanilla JavaScript中动态创建和操作SVG：两种实用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1593894.html
微信扫一扫 
支付宝扫一扫 
