learn SVG 目录

001 基本图形

1. 4种打开方式：svg文件 | 嵌入html标签 |
2. s001/10_basic_figure.html SVG形状元素: 6个(矩形 rect / 圆形 circle / 椭圆 ellipse / 线 line / 折线 polyline /多边形 polygon) +路径 path
3. s001/11_path.html path脚本画形状
4. s001/11_path_2.html path详解 _2
5. s001/11_path_A.html path 详解 A圆弧命令
6. s001/11_path_BezierCurve.html path 贝塞尔曲线
7. s001/12_stroke.html 描边属性
8. s001/13_api.html 基本操作API
9. s001/14_symbol.html symbol分组

002 SVG坐标系统

1. s002/20_viewBox.html 世界、视野、视窗
2. s002/21_group.html 分组
3. s002/22_transform.html 坐标变换
4. s002/22_transform_2.html 坐标变换-demo2

003 文字

1. s003/30_text.html 文字 text
2. s003/31_text_tspan.html 文字 tspan: 正弦舞动的文字
3. s003/31_text_tspan_2.html 文字 tspan 多彩文字
4. s003/32_text-anchor.html 水平居中
5. s003/33_dominant-baseline.html 垂直居中
6. s003/34_verticalAlignment.html 垂直居中-模拟
7. s003/35_textPath.html 路径文本
8. s003/36_textPath_script.html 路径文本 的脚本控制
9. s003/37_link_A.html 超链接

004 颜色、渐变和画刷、滤镜

1. s004/40_rgb_hsl.html 色彩表示
2. s004/41_linearGradient.html 线性渐变
3. s004/42_radialGradient.html 径向渐变
4. s004/43_pattern.html 笔刷-绘制纹理
5. s004/43_pattern_2.html 笔刷-绘制纹理: 格子背景
6. s004/44_filter.html 滤镜: 高斯模糊
7. s004/45_filter_out.html 滤镜: result属性 规定滤镜的输出
8. s004/46_filter_feColorMatrix.html 滤镜: feColorMatrix

005 引用use、裁切clip和蒙版mask

1. s005/50_use.html 图形引用use：绘制星空
2. s005/51_clip.html 裁切clip：绘制灯塔
3. s005/52_mask.html 蒙版mask：绘制月亮
4. s005/53_use_clip_mask.html 完整实例: 星空、月亮、灯塔、倒影

006 SVG 动画

1. s006/60_animate_basic.html SVG动画 基础
2. s006/61_animate_begin.html SVG动画 begin属性: 2个动画顺序播放
3. s006/62_transform.html SVG动画 transform 变换动画
4. s006/63_animateMotion.html SVG动画 沿着轨迹移动
5. s006/64_values.html SVG动画 values属性：渐变动画
6. s006/65_animate_js.html SVG动画 js 脚本方式 力导图 [物理和数学的艺术]
7. s006/65_animate_js_2.html SVG动画 js 脚本方式 力导图 _2 优化 [物理和数学的艺术]
8. s006/66_animate_js_bumpBall.html SVG动画 js 自由落体并弹起的小球
9. s006/67_SMIL_mouse.html SVG动画 响应鼠标事件
10. s006/68_XML_mouse.html SVG动画 响应鼠标事件
11. s006/69_colorCircles.html SVG动画 规律的图形和好的配色(无js)

canvas 目录

1. index.html canvas 目录