变换序列

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

在序列变换中，您可以对图形对象执行多个变换。您可以对图形对象同时执行平移和缩放。先执行变换 A 再执行变换 B 与先执行变换 B 再执行变换 A 的结果不同。

变换序列 - 先平移后缩放

示例

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">

<line x1="0" y1="0" x2="0" y2="100" style="stroke: black; stroke-width: 2;"/>
<line x1="0" y1="0" x2="100" y2="0" style="stroke: black; stroke-width: 2;"/>
<rect x="10" y="10" height="20" width="15"
 transform="translate(30, 20) scale(2)"
 style="fill: red;"/>

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

立即测试

变换序列 - 先缩放后平移

示例

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">

<line x1="0" y1="0" x2="0" y2="100" style="stroke: black; stroke-width: 2;"/>
<line x1="0" y1="0" x2="100" y2="0" style="stroke:black; stroke-width: 2;"/>
<rect x="10" y="10" width="20" height="15"
 transform="translate(30, 20) scale(2)" style="fill: gray;"/>

<rect x="10" y="10" width="20" height="15"
 transform="scale(2) translate(30, 20)"
 style="fill: black;"/>

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

立即测试

下一个主题旋转变换

← 上一个下一个 →