SVG 可视化互动学习指南

在线地址：https://wangruofeng007.github.io/svg-learning/

一份系统、可交互的 SVG 学习指南：13 个章节从基础语法一路讲到生产实践，所有演示均为浏览器内真实渲染的 SVG，可实时交互调参。

章节

1. 基础语法规则
2. 坐标系统与 viewBox
3. 基础图形元素
4. Path 路径语法
5. 填充、描边与绘制
6. 渐变、图案与复用
7. Transform 变换
8. 裁剪、遮罩与滤镜
9. 文本语法
10. SVG 动画
11. 交互与 DOM API
12. 嵌入方式
13. 兼容性与生产建议

内容基于 W3C SVG 2 规范与 MDN Web Docs 整理。

技术栈

• React 19 + TypeScript + Vite 7
• Tailwind CSS 3 + shadcn/ui
• React Router 7

本地开发

npm install
npm run dev        # http://localhost:3000

构建

npm run build      # 产物输出到 dist/

部署

通过 GitHub Actions 自动部署到 GitHub Pages：推送到 main 分支即触发 .github/workflows/deploy.yml，构建并发布。

License

MIT