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