svg-基础变形

svg-基础变形

1. 元素

作用：把属性赋给一整个元素集合

<g fill="red">
  <rect x="0" y="0" width="10" height="10" />
  <rect x="20" y="0" width="10" height="10" />
</g>

2.SVG嵌在SVG内部

比之HTML，SVG允许你无缝嵌入别的svg元素。因此你可以利用内部svg元素的属性viewBox、属性width和属性height简单创建一个新的坐标系统。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<svg width="100" height="100" viewBox="0 0 50 50">
	<rect width="50" height="50" />
	</svg>
</svg>

3.平移

<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />

4.旋转

<rect x="20" y="20" width="20" height="20" transform="rotate(45)" />

5.缩放

scale()变形改变了元素的尺寸。它需要两个数字，作为比率计算如何缩放。0.5表示收缩到50%。如果第二个数字被忽略了，它默认等于第一个值。

6.斜拉

可用skewX()变形和skewY()变形。

7.matrix

<rect x="20" y="20" width="20" height="20" transform="matrix（a,b,c,d,e,f）" />

8.svg的transform和css的transform

svg的transform属性和css的transform差不多，martrix的使用可以参考https://blog.csdn.net/qq_40891322/article/details/109765542?spm=1001.2014.3001.5502