SVG 变换
SVG 变换
SVG 元素可以使用变换函数进行操作。
transform 属性可以与任何 SVG 元素一起使用。
transform 属性定义了一个可以应用于元素及其子元素的变换函数列表。
translate()scale()rotate()skewX()skewY()matrix()
Translate() 函数
translate() 函数用于通过 x 和 y 来移动对象。
假设一个对象放置在 x="5" 和 y="5" 的位置。那么另一个对象包含 transform="translate(50 0)"，这意味着另一个对象将放置在 x 坐标 55 (5 + 50) 和 y 坐标 5 (5 + 0) 的位置。
我们来看一些例子
在此示例中，红色矩形被平移/移动到点 (55,5) 而不是 (5,5)。
这是 SVG 代码
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" />
<rect x="5" y="5" width="40" height="40" fill="red" transform="translate(50 0)" />
</svg>
自己动手试一试 »
在此示例中，红色矩形被平移/移动到点 (5,55) 而不是 (5,5)。
这是 SVG 代码
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" />
<rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" />
</svg>
自己动手试一试 »
在此示例中，红色矩形被平移/移动到点 (55,55) 而不是 (5,5)。
这是 SVG 代码
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" />
<rect x="5" y="5" width="40" height="40" fill="red" transform="translate(50 50)" />
</svg>
自己动手试一试 »
Scale() 函数
scale() 函数用于按 x 和 y 对对象进行缩放。如果未提供 y，则将其设置为等于 x。
scale() 函数用于更改对象的大小。它接受两个数字：x 缩放因子和 y 缩放因子。x 和 y 缩放因子被视为变换后的尺寸与原始尺寸的比率。例如，0.5 将对象缩小 50%。
在此示例中，使用 scale() 函数将红色圆放大到两倍大小。
这是 SVG 代码
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20" fill="yellow" />
<circle cx="50" cy="25" r="20" fill="red" transform="scale(2)" />
</svg>
自己动手试一试 »
在此示例中，使用 scale() 函数将红色圆垂直放大到两倍大小。
这是 SVG 代码
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20" fill="yellow" />
<circle cx="70" cy="25" r="20" fill="red" transform="scale(1,2)" />
</svg>
自己动手试一试 »
在此示例中，使用 scale() 函数将红色圆水平放大到两倍大小。
这是 SVG 代码
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20" fill="yellow" />
<circle cx="50" cy="25" r="20" fill="red" transform="scale(2,1)" />
</svg>
自己动手试一试 »
Rotate() 函数
rotate() 函数用于将对象按 degree 旋转。
在此示例中，蓝色矩形旋转了 45 度。
这是 SVG 代码
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="5" width="40" height="40" fill="blue" transform="rotate(45)" />
</svg>
自己动手试一试 »
SkewX() 函数
skewX() 函数用于沿 x 轴按 degree 对对象进行斜切。
在此示例中，蓝色矩形沿 x 轴斜切了 30 度。
这是 SVG 代码
示例
<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" transform="skewX(30)" />
</svg>
自己动手试一试 »
SkewY() 函数
skewY() 函数用于沿 y 轴按 degree 对对象进行斜切。
在此示例中，蓝色矩形沿 y 轴斜切了 30 度。
这是 SVG 代码
示例
<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" transform="skewY(30)" />
</svg>
自己动手试一试 »
