SVG平移转换用法示例 _平移

本文概述

使用时移动图形
解释
通过平移移动坐标系

在转换转换中, 可以使用带有元素的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="http://www.srcmini.com/#square" x="80" y="80"/> < /svg> < /body> < /html>

立即测试
解释在上面的示例中, 网格的左上角有一个矩形, 并用坐标(80, 80)的左上角重绘了该矩形。
通过平移移动坐标系【SVG平移转换用法示例】翻译规范将拾取整个网格并将其移动到画布上的新位置。
在转换中, 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="http://www.srcmini.com/#square" transform="translate(80, 80)"/> < /svg> < /body> < /html>

立即测试