【前端SVG】图形的移动、旋转、缩放

前言

在学习完SVG图形的基本绘制之后，和CSS一样，SVG的图形中也可以进行图形的移动、旋转、缩放等转换操作。

g

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类似，使用起来也是很简单的。

这篇好文章是转载于：学新通技术网