svg正常放大
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<rect x="30" y="20" width="100" height="100" fill="none" stroke="red" stroke-width="1"/>
<rect x="30" y="20" width="100" height="100" fill="none" stroke="yellow" stroke-width="1" transform="scale(2,2)"/>
</svg>
svg正常放大为边长全部乘2，起始点坐标也直接成2，相当于
<rect x="60" y="40" width="200" height="200" fill="none" stroke="green" stroke-width="1"/>svg按照某点放大
如果想要svg按照某个点进行放大，或者按照中心点进行放大，则在放大的基础上需要进行平移。平移可以在前面平移，也可以在后面平移，还可以前后同时平移。这些其实都是纯粹的数学计算。
但是前面平移和后面平移是有区别的
先看个例子
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<rect x="30" y="20" width="100" height="100" fill="none" stroke="red" stroke-width="1"/>
<rect x="30" y="20" width="100" height="100" fill="none" stroke="yellow" stroke-width="1" transform="scale(2,2)"/>
<rect x="30" y="20" width="100" height="100" fill="none" stroke="green" stroke-width="1" transform="translate(10,10),scale(2)"/>
<rect x="30" y="20" width="100" height="100" fill="none" stroke="skyblue" stroke-width="1" transform="scale(2),translate(10,10)"/>
</svg>
绿色的为前面平移，蓝色的为后面平移。结论就是前面平移，平移的距离为(x*scale+dx)，意思是(原始坐标*放大倍率+平移的距离)，这表示前面平移的平移距离不受放大率的影响。后面平移，平移的距离为(x+dx)*scale，这表示后面平移的平移距离受到放大率的影响。这里值列出了横向平移的距离，纵向的计算公式也是一样的。
如果我们想要以左上角的顶点为起始点进行放大，则前后平移的距离是不一样的。
1.前面平移
刚开始的坐标为(x,y)，放大后的坐标为(x*scale, y*scale)。如果想把起始坐标回到原位就得先减去放大后的坐标，再加上开始的坐标，即-x*scale+x,-y*scale+y。把具体的数值带进去，-x*scale+x = -30*2+30，-y*scale+x = -20*2+20。
<rect x="30" y="20" width="100" height="100" fill="none" stroke="green" stroke-width="1" transform="translate(-30,-20),scale(2)"/>
答案正确
2后面平移
刚开始的坐标为(x,y)，放大后的坐标为(x*scale, y*scale)。如果想把起始坐标回到原位就得先减去放大后的坐标，再加上开始的坐标，即-x*scale+x,-y*scale+y，由于后面平移的距离会受放大倍率的影响，所以要除以放大倍率，即(-x*scale+x)/scale, (-y*scale+y)/scale。把数值带进去，(-30*2+30)/2=-15,(-20*2+20)/2=-10。
<rect x="30" y="20" width="100" height="100" fill="none" stroke="skyblue" stroke-width="1" transform="scale(2),translate(-15,-10)"/>
答案正确
3.前后都平移
由前两条可以知道，放大后的坐标差值为x-x*scale，那么只要抵消掉这个差值就可以了。意思就是需要平移-x*scale和+x。由于前面平移是不受放大率影响的，所以前面平移x，对应的是+x。后面平移是受影响的，所以后面平移是-x，对应的是-x*scale。
<rect x="30" y="20" width="100" height="100" fill="none" stroke="purple" stroke-width="1" transform="translate(30,20),scale(2),translate(-30,-20)"/>
答案正确
svg连续按照某点放大
只要在原来的tansform后面再跟着新的变换就可以了，注意是拼接而不是替换
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<rect x="30" y="20" width="100" height="100" fill="none" stroke="red" stroke-width="1"/>
<rect x="30" y="20" width="100" height="100" fill="none" stroke="purple" stroke-width="1" transform="translate(30,20),scale(2),translate(-30,-20)"/>
<rect x="30" y="20" width="100" height="100" fill="none" stroke="orange" stroke-width="1" transform="translate(30,20),scale(2),translate(-30,-20),translate(30,20),scale(2),translate(-30,-20)"/>
<rect x="30" y="20" width="100" height="100" fill="none" stroke="orange" stroke-width="1" transform="translate(30,20),scale(2),translate(-30,-20),translate(30,20),scale(2),translate(-30,-20),translate(30,20),scale(2),translate(-30,-20)"/>
</svg>其实，连续的transform是可以计算的，最后可以只变成translate(a,b),scale(c)的形式
translate(a,b),scale(c),translate(d,e),scale(f),translate(g,h),scale(i),translate(j,k) = translate((a+c*d + c*f*g + c*f*i*j),(b+c*e+c*f*h+c*f*h*k)),scale(c*f*i)