本文详细介绍了SVG中的<path>元素，包括如何绘制直线、圆弧等，并通过JavaScript动态创建和操作path元素。文章还提到了createElementNS方法用于创建SVG元素，并展示了如何使用JavaScript设置和获取SVG元素的属性。最后，讨论了SVG样式及其优先级，为前端开发者提供了深入理解SVG path和动态图形的知识。
<path d="
M 0 100 //（0，100）是起点
L 100 100 // 画一条直接到 (100,100)
A 100 100 0 1 1 300 100 // 画一段圆弧
L 400 100 //画一条直线到 (400,100)
" stroke=“black” stroke-width=“1” fill=“none”>
运行结果如下：
可以自己修改上述 A 中 参数观察半圆的变化。
1.3、js 操作path
我们经常使用js动态添加、移除元素等，可以实现更炫酷的特效，那js能动态操作path吗？如何操作呢？
我们使用js动态绘制一个与上边案例eg1一样的path。
运行代码，我们发现没有报错，也没有显示任何结果。
添加：alert(path)，打印出 [object HTMLUnknownElement]。
说明 html 把 path 当作普通的 html 标签解析了，发现并不认识该标签，所以页面没有任何效果，此时我们需要介绍一个新的创建元素方法。
createElementNS介绍
最低0.47元/天 解锁文章
1352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
