讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > html教程 > 正文

0

0

在Vanilla JavaScript中动态创建和操作SVG：两种实用方法

聖光之護

聖光之護

发布时间：2025-11-11 12:12:28

|

888人浏览过

|

来源于php中文网

原创

在Vanilla JavaScript中动态创建和操作SVG：两种实用方法

本教程将详细介绍如何在原生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添加到文档的某个位置，例如body
document.body.appendChild(svg);

2. 定义defs和filter

SVG中的元素用于存储可复用的图形对象，如滤镜、渐变等。元素则定义了应用于其他SVG元素的滤镜效果。在JavaScript中创建这些元素与创建SVG根元素类似。

立即学习“Java免费学习笔记（深入）”；

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

// 创建第一个滤镜：layerOuter
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");

// 创建滤镜原语
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）问题。

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

下载 
/**
 * 异步获取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 获取到了 svgRootElement
loadAndParseSVG('./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（通过标签或在Vanilla JavaScript中动态创建和操作SVG：两种实用方法标签的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应用程序。

相关文章

html5怎么出现圆_html5用border-radius设50%或SVG画圆形【绘制】

HTML如何添加网格背景_CSS样式设计指南【技巧】

html4的font标签被html5删了吗_文字样式怎么改【解答】

HTML5怎么取消圆点_HTML5用list-style:none取消ul/ol列表圆点【取消】

html5 before怎么用_html5用::before伪元素在元素前加装饰或内容【使用】

相关标签:

css javascript java html svg 编码 浏览器 app access 工具 csv ai 跨域 JavaScript css html 命名空间 xml Filter 字符串 接口 线程 主线程 对象 dom 异步 transform http Access

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：在响应式设计中防止带连字符单词换行：非断行连字符的应用 下一篇：HTML中链接CSS样式表的正确方法与路径管理

作者最新文章

YDB 中如何安全地将动态参数传递给会话池执行的 SQL 查询

2025-12-30 13:46

PHP 中使用 glob() 快速定位并访问指定序号的目录

2025-12-30 13:47

实现两个开关按钮的互斥切换（一个开启时另一个自动关闭）

2025-12-30 13:49

如何在网页中安全地请求并使用文件系统编辑权限

2025-12-30 13:50

一股暴死味 《007：初露锋芒》称面向“现代观众”

2025-12-30 13:54

Go 语言构建流程中如何集成额外的编译步骤？

2025-12-30 13:55

新三国志曹操传新年庆典活动速通攻略

2025-12-30 14:04

如何在 Go App Engine 项目中正确使用 go get 安装的外部包

2025-12-30 14:07

Go 中自定义结构体的可读性格式化：实现 Stringer 接口实现优雅打印

2025-12-30 14:08

如何精准固定背景上的可交互元素（如悬浮点击区域）

2025-12-30 14:09

热门AI工具

更多
DeepSeek

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台
豆包大模型

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型
通义千问

通义千问

阿里巴巴推出的全能AI助手

AI大模型
腾讯元宝

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格
文心一言

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作
讯飞写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具
即梦AI

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成
ChatGPT

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

540

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

727

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

470

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

391

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

653

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

543

2023.09.20

桌面文件位置介绍
桌面文件位置介绍

本专题整合了桌面文件相关教程，阅读专题下面的文章了解更多内容。

0

2025.12.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.7万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

CSS教程
CSS教程

共754课时 | 17.2万人学习

最新文章

更多
CGI如何返回HTML内容_服务端生成网页步骤【指南】
网页如何连接HTML外部资源_路径引用规则详解【指南】
如何使用 CSS 浮动实现页面顶部左右元素分离
如何使用 CSS 浮动实现顶部左右元素分离布局
SVG中检测鼠标点击路径的跨浏览器兼容方案
SVG 中检测鼠标点击路径的跨浏览器兼容方案
如何安全提取Beautiful Soup中含链接的表格行数据
使用极大数值的 height（如 1000000px）设置 div 是否可行？
html5怎么高效自学_html5边学基础标签边做小项目练手高效入门【自学】
html5怎么调swf_HTML5用embed标签嵌入SWF需兼容Flash播放【嵌入】
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部