旋转变换

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

使用旋转变换，您可以按指定的角度旋转坐标系。

<!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>

立即测试

下一主题围绕中心缩放

旋转变换

绕中心点旋转

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

SVG 教程

SVG 效果

SVG 渐变

SVG 动画

SVG 滤镜

转换

面试题

旋转变换

绕中心点旋转

示例

相关帖子

变换序列

缩放变换

围绕中心缩放

平移变换

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器