在绘制折线是,我通常是将 fill 设置成 none ,因为 fill 默认值是黑色,如果不设置成 none 会出现以下效果:
将fill 设置成 none 后,必须设置 stroke 为一个有颜色的值,不然不会有渲染效果。
7.多边形 polygon
多边形使用 标签,基础属性和 差不多:
points: 点集
stroke: 描边颜色
fill: 填充颜色
会自动闭合(自动将起始点和结束点链接起来)。
8.直线路径 path
其实在 SVG 里,所有基本图形都是 的简写。所有描述轮廓的数据都放在 d 属性里,d 是 data 的简写。
d 属性又包括以下主要的关键字(注意大小写!):
M: 起始点坐标,
moveto 的意思。每个路径都必须以
M 开始。
M 传入
x 和
y 坐标,用逗号或者空格隔开。
L: 轮廓坐标,
lineto 的意思。
L 是跟在
M 后面的。它也是可以传入一个或多个坐标。大写的
L 是一个
绝对位置。l: 这是小写
L,和
L 的作用差不多,但
l 是一个
相对位置。
H: 和上一个点的Y坐标相等,是
horizontal lineto 的意思。它是一个
绝对位置。
h: 和
H 差不多,但
h 使用的是
相对定位。
V: 和上一个点的X坐标相等,是
vertical lineto 的意思。它是一个
绝对位置。
v: 这是一个小写的
v ,和大写
V 的差不多,但小写
v 是一个相对定位。
Z: 关闭当前路径,
closepath 的意思。它会绘制一条直线回到当前子路径的起点。