Open YIXUNFE opened 8 years ago
我们已经在本系列的第一篇文章中介绍了 SVG 中的一些基本形状,现在我们一起来学习一下路径元素 path 的一些知识。
path 元素中有一个 d 属性,我们在该属性中描述路径。
<path d="M..." />
命令都有大小写形式,大写表示使用绝对坐标,小写表示使用相对坐标。比如 M 10 0 L 30 30 表示从当前点画一条到 (30, 30) 的直线,而 M 10 0 l 30 30 表示从当前点绘制一条到 (40, 30) 的直线。命令中 M 和 Z 命令的大小写效果相同。
M 10 0 L 30 30
M 10 0 l 30 30
所有不必要的空白都可以删除,命令和字母之间不需要空白:
<path d="M 10 0 L 30 30 Z" /> //简化后 <path d="M10 0L30 30Z" />
正数与负数之间不需要空格
<path d="M 100 100 l 30 -30 Z" /> //简化后 <path d="M100 100l30-30Z" />
lineTo 命令可以被省略
<path d="M 100 100 L 30 30 L 50 100 L 40 10 Z" /> //简化后 <path d="M100 100 30 30 50 100 40 10Z" /> //相对坐标的例子 <path d="m 100 100 l 30 30 l 50 100 l 40 10 Z" /> //简化后 <path d="m100 100 30 30 50 100 40 10Z" />
需要注意的是,上面例子中的 lineTo 命令的省略会根据 moveTo 命令的大小写判断第一组(绝对)坐标后面的数字对是绝对坐标还是相对坐标。
利用简化标记
<path d="M 100 100 L 100 200 Z" /> //简化后 <path d="M100 100V200Z" />
上面的例子中我们使用了 V 命令绘制了一条垂直线。
学习 SVG(三)—— 路径
我们已经在本系列的第一篇文章中介绍了 SVG 中的一些基本形状,现在我们一起来学习一下路径元素 path 的一些知识。
path 元素中的命令
path 元素中有一个 d 属性,我们在该属性中描述路径。
命令大小写的区别
命令都有大小写形式,大写表示使用绝对坐标,小写表示使用相对坐标。比如
M 10 0 L 30 30
表示从当前点画一条到 (30, 30) 的直线,而M 10 0 l 30 30
表示从当前点绘制一条到 (40, 30) 的直线。命令中 M 和 Z 命令的大小写效果相同。快捷表示法
所有不必要的空白都可以删除,命令和字母之间不需要空白:
正数与负数之间不需要空格
lineTo 命令可以被省略
需要注意的是,上面例子中的 lineTo 命令的省略会根据 moveTo 命令的大小写判断第一组(绝对)坐标后面的数字对是绝对坐标还是相对坐标。
利用简化标记
上面的例子中我们使用了 V 命令绘制了一条垂直线。
参考:
Thanks