HTML5的SVG绘图笔记3:变换

本文深入讲解SVG中的平移、旋转、缩放及倾斜等图形变换方法。通过实例演示如何使用translate、rotate、scale和skewX/Y来改变图形的位置、方向、大小和形态,为读者提供直观的学习材料。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

平移

使用translate方法,可以移动坐标轴原点。

transform= translate(<x>[,<y>]);

旋转

使用rotate方法,可以定义目标对象绕某点旋转一定的角度。

transform=rotate(<angle>[,<x>,<y>]);

缩放

使用scale方法,可以缩放图形元素的尺寸。

transform=scale(<x>[,<y>]);

倾斜

使用一个或多个倾斜方法skewX和skewY,可以对SVG元素进行倾斜定义。

transform=skewX(<angle>);
transform=skewY(<angle>);
<svg width="700" height="500">
 <g id="square">
  <rect x="20" y="20" height="100" width="100" stroke="black" style="fill:brown"/>
 </g>
<use xlink:href="#square" transform="translate(90,30)"></use>
<use xlink:href="#square" transform="translate(280,0) rotate(30) "></use>
<use xlink:href="#square" transform="translate(20,180) scale(0.8)"></use>
<use xlink:href="#square" transform="translate(140,180) skewX(30)"> </use>
</svg>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值