《svg精髓》学习笔记（路径）

发表于 | 阅读次数

之前所有的基本形状都是元素的简写形式，path接受d属性（data）表示一系列路径。

moveto、lineto和closepath

如下：

1
<path d="M 10 10 L 100 10 L 100 100 L 10 100 Z"/>

表示，先移动到点(10, 10)，然后lineto到点(100, 10)，lineto到点(100, 100), lineto到点(10, 100),大写的Z表示自动关闭路径。

M和L大小写是有区别的，大写的M和L表示绝对坐标，小写的话表示相对于当前画笔的坐标。

路径的快捷方式

使用H和V可以简写水平和垂直方式的画线：

简写形式 等价的冗长形式 效果
H 20 L 20 current_y 绘制一条到绝对位置(20, current_y)的线
h 20 L 20 0 绘制一条到(current_x + 20, current_y)的线
V 20 L current_x 20 绘制一条到绝对位置(current_x, 20)的线
v 20 L 0 20 绘制一条到(current_x, current_y + 20)的线

路径快捷方式表示法

  1. 可以在L或l后面放多组坐标
1
<path d="M 10 10 L 30 50 60 80 90 20 Z"/>
  1. 所有不必要的空格都可以消除，比如字母后面的空格

椭圆弧

椭圆弧以字母A为命令，接受7个参数：

  • 点所在的椭圆的x半径和y半径

  • 椭圆的x轴旋转角度x-axis-rotation

  • large-arc-flag，如果需要圆弧角度小于180度，其为0；否则为1

  • sweep-flag，如果坐标需要以负角度绘制则为0，已正角度绘制则为1

  • 终点的x坐标和y坐标

1
<path d="M 100 100 A100,50 0 0,0 255 255" />