SVG 形状练习场
基础图元、变换、描边动画的交互演示。
rect / circle / pathtransform
当前图元
polygon
旋转角
0°
半径 / 边长
64px
描边宽度
3.0px
t = 0.00s
SVG 用「坐标 + 属性」描述图形,浏览器负责光栅化。所有图元都能被 transform、渐变、滤镜和动画改造。
知识要点
- · SVG 是矢量图形,任意缩放都不失真;viewBox 定义坐标系。
- · 基本图元:rect、circle、ellipse、line、polyline、polygon、path。
- · path 的 d 属性用命令描述轨迹:M 移动、L 直线、Q/T 二次贝塞尔、C 三次贝塞尔、A 圆弧、Z 闭合。
- · transform 与 CSS 一样支持 translate / rotate / scale / skew,可以叠加。
- · stroke-dasharray + stroke-dashoffset 是「描边生长」动画的经典做法。