在学习完SVG
图形的基本绘制之后,和CSS
一样,SVG
的图形中也可以进行图形的移动、旋转、缩放等转换操作。
g
g这个标签,它用于图形的集合,利用g可以批量的给集合中的图形进行批量赋值。
<g fill="red">
<circle cx="10" cy="10" width="30" height="30" r="10"></circle>
<circle cx="40" cy="10" width="30" height="30" r="10"></circle>
</g>
图形平移
translate
函数用于元素的水平、垂直的移动。该函数需要传入1-2
个参数,分别x
,x
和y
。如果你只需要进行水平移动时可以使用单参数形式,第二个值默认为0
。
<circle cx="30" cy="30" r="15" fill="red" />
<circle cx="30" cy="30" r="15" fill="red" transform="translate(40)" />
<circle cx="30" cy="30" r="15" fill="red" transform="translate(40,40)" />
图形旋转
rotate
函数用于旋转一个元素,需要传入一个旋转角度,正角度表示了顺时针的旋转,负角度表示逆时针的旋转。
<rect x="60" y="0" width="40" height="40" fill="red" transform="rotate(45)" />
需要注意的是这里不是按照图形的中心点进行旋转,如果你的需求的按图形的中心点进行旋转可以使用CSS
来实现,加入以下内联代码即可实现。(可以通过transform-origin
属性定义中心点)
style="transform-box:fill-box;transform-origin:center;"
斜切
skewX
、skewY
函数用于转换,将图形倾斜到二维的平面上。它需要传入一个角度用于扭曲图形。
<rect x="10" y="0" width="40" height="40" fill="none" stroke="red" />
<rect x="60" y="0" width="40" height="40" fill="none" stroke="red" transform="skewX(40)" />
<rect x="150" y="0" width="40" height="40" fill="none" stroke="red" transform="skewY(50)" />
缩放
scale
函数用于缩放一个图形,它需要传入一个缩放的值作为比例来缩放。
<circle cx="30" cy="30" r="15" fill="none" stroke="red" transform="scale(0.5)" />
<circle cx="30" cy="30" r="15" fill="none" stroke="blue" transform="scale(1)" />
<circle cx="30" cy="30" r="15" fill="none" stroke="green" transform="scale(1.5)" />
<circle cx="100" cy="30" r="15" fill="none" stroke="red" transform="scale(0.5)" style="transform-box:fill-box;transform-origin:center;" />
<circle cx="100" cy="30" r="15" fill="none" stroke="blue" transform="scale(1)" style="transform-box:fill-box;transform-origin:center;" />
<circle cx="100" cy="30" r="15" fill="none" stroke="green" transform="scale(1.5)" style="transform-box:fill-box;transform-origin:center;" />
与上面的rotate
一样,如果你想要按照图形的中心点进行旋转,需要与CSS
一起使用。
本次学习了在SVG
中的关于图像变形的相关属性,其实它的属性与CSS类似,使用起来也是很简单的。