个性化阅读
专注于IT技术分析

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="#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>

立即测试

赞(0) 打赏
未经允许不得转载:srcmini » SVG平移转换用法示例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏