本文概述
在转换转换中, 可以使用带有元素的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: purple; fill-opacity: .4; stroke: black; stroke-width: 2;"/>
</g>
<use xlink:href="#square" x="80" y="80"/>
</svg>
</body>
</html>立即测试
解释
在上面的示例中, 网格的左上角有一个矩形, 并用坐标(80, 80)的左上角重绘了该矩形。
通过平移移动坐标系
翻译规范将拾取整个网格并将其移动到画布上的新位置。
在转换中, x和y值将转换为诸如transform =” translate(x-value, y-value)”之类的属性。翻译项用于移动。
例子
<!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>立即测试
