← 返回首页

🎨 SVG 图形

可缩放矢量图形 (Scalable Vector Graphics) - 创建高质量、可交互的矢量图形

关于 SVG

SVG 是一种基于 XML 的矢量图形格式,具有以下优势:

📚 学习路径

基础形状

学习 SVG 的基本图形元素:圆形、矩形、椭圆、多边形等

入门

路径绘制

掌握 path 元素和路径命令,绘制复杂的曲线和形状

进阶

渐变填充

使用线性渐变和径向渐变创建丰富的视觉效果

进阶

变换操作

学习平移、旋转、缩放和倾斜等变换操作

入门
SVG Text Path

文本处理

在 SVG 中添加和样式化文本,包括路径文本

入门

滤镜效果

使用 SVG 滤镜创建阴影、模糊、光照等特效

高级

动画效果

使用 SMIL 动画和 CSS 动画让 SVG 动起来

进阶

图标系统

创建可复用的 SVG 图标库和 sprite 系统

进阶

交互图表

使用 SVG 创建动态、可交互的数据可视化图表

高级

响应式 SVG

掌握 viewBox 和 preserveAspectRatio,创建自适应图形

进阶