简介
SVG 是一种基于 XML 的矢量图形格式，可以通过代码进行创建和修改。本文将讲解如何使用 JavaScript 在 HTML 页面中动态创建 SVG 元素。
准备工作
在开始之前，请确保已经了解以下内容：
- HTML 和 CSS 基础知识
- JavaScript 的 DOM 操作
- SVG 的基础语法和属性
步骤
1. 创建一个空的 SVG 容器
首先，我们需要在 HTML 页面中创建一个空的 SVG 容器（即 <svg> 标签），用于存放我们后面要创建的 SVG 元素。
<div id="container"> <svg id="svg-container"></svg> </div>
接着，我们可以使用 JavaScript 获取这个容器，并设置它的宽度和高度等属性。
const svgContainer = document.getElementById('svg-container');
svgContainer.setAttribute('width', '500');
svgContainer.setAttribute('height', '500');2. 创建 SVG 元素
在 SVG 容器中创建元素的方法是使用 createElementNS 函数，该函数接受两个参数：命名空间和元素名称。命名空间固定为 "http://www.w3.org/2000/svg"，元素名称可以是任意合法的 SVG 元素名称。
下面是一个创建圆形元素的示例：
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', '250');
circle.setAttribute('cy', '250');
circle.setAttribute('r', '50');
circle.setAttribute('fill', 'red');
svgContainer.appendChild(circle);上面代码中，我们创建了一个圆形元素，并设置了它的 cx、cy、r 和 fill 属性，然后将它添加到 SVG 容器中。
3. 修改 SVG 元素
创建出来的 SVG 元素是可以随时修改的。例如，我们可以使用以下代码将圆形元素的颜色改为蓝色：
circle.setAttribute('fill', 'blue');4. 创建复杂的 SVG 图形
通过组合多个 SVG 元素，我们可以创建出更加复杂的 SVG 图形。例如，下面是一个创建三角形图形的示例：
const triangle = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
triangle.setAttribute('points', '250,50 200,200 300,200');
triangle.setAttribute('fill', 'green');
svgContainer.appendChild(triangle);上面代码中，我们创建了一个多边形元素，并设置了它的 points 和 fill 属性，然后将它添加到 SVG 容器中。
总结
通过本文的学习，我们了解了如何使用 JavaScript 在 HTML 页面中动态创建和修改 SVG 元素。希望这些知识能够帮助你更好地应用 SVG 技术，并创造出更加丰富多彩的页面效果。
完整示例代码：
-- -------------------- ---- ------- ---- --------------- ---- ------------------------- ------ -------- ----- ------------ - ----------------------------------------- ---------------------------------- ------- ----------------------------------- ------- ----- ------ - ------------------------------------------------------ ---------- ------------------------- ------- ------------------------- ------- ------------------------ ------ --------------------------- ------- --------------------------------- ----- -------- - ------------------------------------------------------ ----------- ------------------------------- ------- ------- ---------- ----------------------------- --------- ----------------------------------- ---------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27932