SVG 直线路径写法示例

2018-08-24 16:19:35 浏览数 (1)

直线指令

  • M 移动
  • L 画线
  • H 画水平线 H 20 相对与 L 20 当前y座标
  • V 画垂直线 V 20 相对与 V 当前x座标 20
  • Z 闭合曲线

画直线

大写字母表示到后面值为绝对值,小写字母表示后面值为相对当前点的值 画一条起点是(10, 10)终点点是 (20, 30) 的线

代码语言:javascript复制
<path d="M 10 10 L 20 30" stroke="#333"/>

在当前点的位置水平移动 10,垂直移动 10,再画一天到 (40, 50) 的线

代码语言:javascript复制
<path d="m 10 10 L 40 50" stroke="#333"/>

画一个与下面代码等效的矩形

代码语言:javascript复制
<rect x="10" y="20" width="30" height="15"/>
代码语言:javascript复制
<path d="M 10 20 h 30 v 15 h -30 Z" stroke="#333"/>
svg

0 人点赞