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

SVG旋转转换用法示例

使用旋转变换, 可以将坐标系旋转指定的角度。

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

<line x1="0" y1="0" x2="100" y2="0" style="stroke: black; stroke-width: 2"/>
<line x1="0" y1="0" x2="0" y2="100" style="stroke: black; stroke-width: 2;"/>

<rect x="70" y="30" width="20" height="20" style="fill: gray;"/>
<rect x="70" y="30" width="20" height="20"
 transform="rotate(45)" style="fill: black;"/>

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

立即测试

绕中心点旋转

使用旋转, 还可以围绕原点以外的其他点旋转单个对象。

例子

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

<circle cx="50" cy="50" r="3" style="fill: black;" />
<g id="arrow" style="stroke: black;">
<line x1="60" y1="50" x2="90" y2="50" />
<polygon points="90 50, 85 45, 85 55" />
</g>

<use xlink:href="#arrow" transform="rotate(60, 50, 50)" />
<use xlink:href="#arrow" transform="rotate(-90, 50, 50)" />
<use xlink:href="#arrow" transform="rotate(-150, 50 50)" />

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

立即测试

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

评论 抢沙发

评论前必须登录!

 

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

微信扫一扫打赏