SVG 直线路径写法示例

96
九彩拼盘
2016.12.14 22:04* 字数 141

直线指令

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

画直线

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

<path d="M 10 10 L 20 30" stroke="#333"/>

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

<path d="m 10 10 L 40 50" stroke="#333"/>

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

<rect x="10" y="20" width="30" height="15"/>
<path d="M 10 20 h 30 v 15 h -30 Z" stroke="#333"/>

🐋 Web 前端
Web note ad 1