平移变换

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

在平移变换中，您可以使用具有 x 和 y 属性的元素将一组图形对象放置在特定位置。

使用 use 移动图形

使用元素，您可以将图形对象移动到特定位置。

示例

<!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: purple; fill-opacity: .4; stroke: black; stroke-width: 2;"/>
</g>
<use xlink:href="#square" x="80" y="80"/>

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

立即测试

说明

在上面的示例中，网格的左上角有一个矩形，并以坐标 (80, 80) 处左上角重新绘制它。

使用平移移动坐标系

translate 规范拾取整个网格并将其移动到画布上的新位置。

在平移中，x 和 y 值转换为属性，如 transform="translate(x-value, y-value)"。 translate 术语用于移动。

示例

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

<g id="square">
<rect x="10" y="10" width="30" height="30" 
 style="fill: purple; fill-opacity: .5; stroke: black; stroke-width: 1.5;"/>
</g>
<use xlink:href="#square" transform="translate(80,80)"/>

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

立即测试

下一主题SVG 缩放变换