聊聊 SVG 基本形状转换那些事

一、前言

前段时间研究 SVG 压缩优化，发现SVG预定义的 rect、circle、ellipse、line、polyline、polygon 六种基本形状可通过path路径转换实现，这样可以在一定程度上减少代码量。不仅如此，我们常用的 SVG Path 动画(路径动画)，是以操作path中两个属性值stroke-dasharray和stroke-dashoffset来实现，基本形状转换为path路径，有利于实现路径动画。

二、SVG基本形状

SVG 提供了rect、circle、ellipse、line、polyline、polygon六种基本形状用于图形绘制，这些形状可以直接用来绘制一些基本的形状，如矩形、椭圆等，而复杂图形的绘制则需要使用 path 路径来实现。

1.rect 矩形

1 2	<rect x= "10" y= "10" width= "30" height= "30"/> <rect x= "60" y= "10" rx= "10" ry= "10" width= "30" height= "30"/>

SVG中rect元素用于绘制矩形、圆角矩形，含有6个基本属性用于控制矩形的形状以及坐标，具体如下：

1 2 3 4 5 6

x 矩形左上角x位置, 默认值为 0 y 矩形左上角y位置, 默认值为 0 width 矩形的宽度, 不能为负值否则报错, 0 值不绘制 height 矩形的高度, 不能为负值否则报错, 0 值不绘制 rx 圆角x方向半径, 不能为负值否则报错 ry 圆角y方向半径, 不能为负值否则报错

这里需要注意，rx 和 ry 的还有如下规则：

• rx 和 ry 都没有设置, 则 rx = 0 ry = 0
• rx 和 ry 有一个值为0, 则相当于 rx = 0 ry = 0，圆角无效
• rx 和 ry 有一个被设置, 则全部取这个被设置的值
• rx 的最大值为 width 的一半, ry 的最大值为 height 的一半

1 2 3 4 5 6 7 8 9 10

rx = rx || ry || 0; ry = ry || rx || 0; rx = rx > width / 2 ? width / 2 : rx; ry = ry > height / 2 ? height / 2 : ry; if( 0 === rx || 0 === ry){ rx = 0, ry = 0; //圆角不生效，等同于，rx，ry都为0 }

2.circle 圆形