SVG-变换
2024-10-06 09:33:21
transform变换
translate平移
<svg width="200" height="50">
<rect x="0" y="0" width="20" height="10" fill="red "/>
<rect x="0" y="0" width="20" height="10" transform="translate(10, 20)"/>
</svg>
See the Pen svg-example-17 by flqbestboy
(@fanlinqiang) on CodePen.
rotate旋转
// angle 旋转角度，>0 顺时针
// [centerX, centerY] 旋转中心点
rotate(angle, [centerX, centerY])
<svg width="200" height="50">
<rect x="20" y="0" width="20" height="10" fill="red "/>
<rect x="20" y="0" width="20" height="10" transform="rotate(30)" fill="green"/>
<rect x="20" y="0" width="20" height="10" transform="rotate(-180, 20, 10)"/>
</svg>
See the Pen svg-example-18 by flqbestboy
(@fanlinqiang) on CodePen.
scale缩放
// scaleX,scaleY分别表示水平垂直方向的缩放比例，如0.5表示缩小半
// 若无scaleY则，其值默认等于scaleX
scale(scaleX [, scaleY])
<svg width="200" height="50">
<rect x="20" y="0" width="20" height="10" fill="red "/>
<rect x="40" y="0" width="20" height="10" transform="scale(0.8)" fill="green"/>
<rect x="60" y="0" width="20" height="10" transform="scale(1, 2)"/>
</svg>
See the Pen svg-example-19 by flqbestboy
(@fanlinqiang) on CodePen.
skewX和shewY斜切
skewY(angle)
skewX(angle)
<svg width="200" height="50">
<rect x="20" y="0" width="20" height="40" fill="red" transform="skewY(10) skewX(10)"/>
<rect x="40" y="0" width="20" height="40" fill="green" transform="skewY(10)"/>
<rect x="60" y="0" width="20" height="40" transform="skewX(10)"/>
</svg>
See the Pen svg-example-20 by flqbestboy
(@fanlinqiang) on CodePen.
最新文章
- 软件工程（FZU2015）赛季得分榜，第三回合
- 【C语言入门教程】5.2 函数的作用域规则（auto, static）
- Python 基礎 - 變量
- safedog的小技巧
- tomcat源码解读(2)–容器责任链模式的实现
- JQuery（一） 入门
- Android中使用WebView与JS交互全解析
- UGUI学习之InputField
- VC环境下编译OpenSSL（仅仅是个示例，网上还有许多相关文章）
- Java I/O之NIO概念理解
- Docker初步了解
- MySQL 数据类型对比：char 与 varchar；varchar 与 text；datetime 与 timestamp；blob 与 text；
- apache 的 配置项
- Linux-c系统编程
- 解决 ArchLinux 下中文 Chinese 不能输入 couldnt input 的问题
- 转 MySQL连接超时
- .NET连接MongoDB数据库实例教程
- python学习之老男孩python全栈第九期_day021知识点总结——包、异常处理
- ubuntu apt-xxx
- BigDecimal 执行精确小数计算