js动态修改path值 svg_SVG基本形状path路径置换

前言

前段时间研究 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 路径来实现。

rect 矩形

SVG中rect元素用于绘制矩形、圆角矩形，含有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 的一半

比如：

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

}

circle 圆形

SVG中circle元素用于绘制圆形，含有3个基本属性用于控制圆形