Skip to content

TNotes.svg

Main Navigation 👀 TOC

🏠 Home

⚙️ Settings

📒 TNotes

📂 TNotes.yuque

Appearance

Sidebar Navigation

1. svg 起步

✅ 理解 svg 是什么

✅ 对比 svg 和 canvas

✅ 区分 Image 和 Graphic

✅ 理解 svg 的 xmlns 属性

✅ 理解 svg 的 version 属性

✅ vscode svg 相关插件

✅ 在 html 中嵌入 svg

✅ 在 .html 和 .svg 文件中，根元素 svg 的数量

✅ 绘制坐标系网格

✅ 理解 viewBox 视口

2. 基本图形绘制

✅ 使用 line 绘制直线

✅ 使用 polyline 绘制折线

✅ 使用 rect 绘制矩形

✅ 使用 polygon 绘制多边形

✅ 使用 circle 绘制圆形

✅ 使用 ellipse 绘制椭圆形

✅ 使用属性 x、y、dx、dy 控制文本的绘制位置

✅ 使用属性 text-anchor 设置文本的水平对齐方式

✅ 使用属性 textLength 约束文本长度

✅ 通过 text 的其他属性来控制文本样式

✅ 使用 tspan 更细粒度地控制 text 中的内容

✅ 使用 textPath 实现按照指定路径绘制文本

3. path 路径

✅ 认识 path 元素

✅ 使用 path 绘制直线

✅ 绘制【扫码】图标

✅ 使用 path 绘制弧

✅ 绘制【群】图标

✅ 使用 path 绘制二次贝塞尔曲线

✅ 使用 path 绘制三次贝塞尔曲线

4. stroke 描边和 fill 填充

✅ 使用属性 stroke、stroke-width、stroke-opacity、stroke-linecap 设置描边样式

✅ 使用属性 stroke-linejoin 设置线条连接处样式

✅ 使用属性 stroke-dasharray 设置虚线

✅ 使用属性 stroke-dashoffset 设置虚线的偏移

✅ 【练习】使用 stroke-dasharray 模拟加载中动画效果

⏰ 使用属性 fill、fill-opacity 设置填充样式

⏰ 使用属性 fill-rule 设置填充规则

⏰ 绘制【眼睛】图标

5. 复用

⏰ 使用 use 引用图形

⏰ 使用 g 作为容器

⏰ 使用 defs 定义图形

6. svg 与传统前端技术相结合

6.1. svg + html

✅ 在 html 中嵌入 svg

6.2. svg + css

⏰ 使用 css 控制 svg 样式

6.3. svg + js

⏰ 使用 js 控制 svg 实现 CRUD 操作

7. 练习

⏰ 简易动态坐标系制作

⏰ 【练习】绘制静态折线图

⏰ 【练习】绘制动态折线图

⏰ 【练习】绘制柱状图

⏰ 【练习】绘制静态的饼图

⏰ 【练习】绘制动态饼图

8. ⏰ empty

⏰ empty

Copied!

✅ 已完成：34

0042. 【练习】绘制静态的饼图

1. 📒 notes

1. 📒 notes

👣 9437 | 2025年04月29日周二 14:29:34

Last updated:

Pager

上一篇⏰ 【练习】绘制柱状图

下一篇⏰ 【练习】绘制动态饼图

0042. 【练习】绘制静态的饼图 ​

1. 📒 notes ​

0042. 【练习】绘制静态的饼图

1. 📒 notes