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>
尝试一下 »
