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="http://www.srcmini.com/#arrow" transform="rotate(60, 50, 50)" /> < use xlink:href="http://www.srcmini.com/#arrow" transform="rotate(-90, 50, 50)" /> < use xlink:href="http://www.srcmini.com/#arrow" transform="rotate(-150, 50 50)" /> < /svg> < /body> < /html>

【SVG旋转转换用法示例】立即测试