缩放变换

2025 年 3 月 17 日 | 阅读 1 分钟

在缩放变换中，您可以通过缩放坐标系来使对象大于或小于定义它时的大小。

均匀缩放图形

均匀缩放变换用于均匀地将两个轴的比例加倍。

示例

<!DOCTYPE html>
<html>
<body>
<svg width="200px" height="200px" viewBox="0 0 200 200">

<g id="square">
<rect x="20" y="20" width="30" height="30"
 style="fill: blue; fill-opacity: .5; stroke: black;"/>
</g>
<use xlink:href="#square" transform="scale(2)"/>

</svg>
</body>
</html>

立即测试

说明

在上面的示例中，网格没有移动。 (x, y) 点仍然在相同的位置，但是每个用户坐标现在是以前的两倍大。笔画宽度仍然是一个用户单位，而该单位现在已经变得两倍大。这就是较大的正方形的轮廓更粗的原因。

非均匀缩放图形

在非均匀缩放图形中，您可以为坐标系的 x 轴和 y 轴指定不同的缩放因子。

示例

<!DOCTYPE html>
<html>
<body>
<svg width="200px" height="200px" viewBox="0 0 200 200">

<g id="square">
<rect x="20" y="20" width="30" height="30"
 style="fill: blue; fill-opacity: .5; stroke: black;"/>
</g>
<use xlink:href="#square" transform="scale(2)"/>

</svg>
</body>
</html>

立即测试

下一个主题SVG 序列变换