HTML5(八)——SVG 之 path 详解

注：以上所有命令大小写都可以，区别是大写命令表示绝对定位，小写表示相对定位。

1.2、path 使用

使用语法：

d：引出路径，d 中的值由多条命令组合而成。

圆弧在实际场景中应用非常广泛，A 命令中参数较多，large-arc 和 sweep 较难理解，详细介绍下。

使用语法：

如上图所示，A 到 B 两个点再加半径，可以绘制出 4 条弧线，具体选哪一条呢？就是由 large-arc (是否是大弧)和 sweep(是否逆时针旋转) 两个参数决定。

large-arc = 1 表示弧度大于等于180，反之就是小于180。

sweep = 0 表示逆时针旋转，反正顺时针旋转。

所以上述 4 条弧线分别对应的两个参数为：

• 1：(0 0)

• 2：(0,1)

• 3：(1,1)

• 4：(1,0)

eg：使用 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介绍

createElementNS 是创建一个具有指定的命名空间URI和限定名称的元素。

使用语法：document.createElementNS(namespaceURI, qualifiedName[, options]);

• namespaceURI 指定与元素相关联的命名空间URI的字符串。创建的元素的namespaceURI (en-US)属性使用namespaceURI的值进行初始化。

• qualifiedName指定要创建的元素的类型的字符串。 创建的元素的nodeName (en-US)属性使用qualifiedName的值进行初始化。

• options可选的一个可选的包含单个属性的ElementCreationOptions对象，其值是预先使用customElements.define()定义的自定义元素的标签名称。为了向后兼容自定义元素规范的早期版本，一些浏览器允许您在此使用字符串替代对象，其中字符串的值是自定义元素的标签名称。

生成path元素代码：

let path = document.createElementNS(

“http://www.w3.org/2000/svg”,

“path”

)

js操作属性时，html元素与SVG元素区别：

普通html元素可以使用两种方法：

1. setAttribute(x,val) / getAttribute(x)

2. obj.x

SVG操作方法只有一种

1. setAttribute(x,val) / getAttribute(x)

eg3：图表中饼图是特别常见的，我们就先使用 js 动态地绘制一个扇形圆弧。

运行结果如图所示：

如果有兴趣，可以自己修改开始角度和结束角度，可以绘制出很多种不同效果的圆弧。

二、样式以及优先级

=========

上述代码

<path d="

M 0 100 //（0，100）是起点

L 100 100 // 画一条直接到 (100,100)

" stroke=“black” stroke-width=“1” fill=“none”>

上述属性可以分为两类：