（挥舞魔法矢量笔）同学们，上节课我们用canvas玩像素涂鸦，现在要解锁浏览器的矢量魔法啦！准备好用数学公式在网页上画永不模糊的图形了吗？
8.5 SVG简介和实际使用
8.5.1 会变形的魔法贴纸
SVG就像用XML代码织毛衣，浏览器会自动帮你熨平所有褶皱：
<!-- 直接在HTML里织毛衣 -->
<svg width="200" height="200" style="border:1px dashed #ccc">
<circle cx="100" cy="100" r="80" fill="#FFB6C1" />
<text x="50" y="120" font-family="Comic Sans MS" font-size="20">
Hello SVG!
</text>
</svg>（右键另存为图片？这可是自带超清Retina屏的矢量图！）
8.5.2 SVG vs Canvas 擂台赛
两种绘图技术的区别就像油画和剪纸：
| 特性 | SVG（剪纸艺术） | Canvas（油画创作） |
|---|---|---|
| 图像类型 | 矢量图形（数学公式） | 位图（像素点） |
| DOM节点 | 每个图形都是DOM元素 | 单一块画布 |
| 事件绑定 | 可单独给图形加点击事件 | 只能监听整个画布 |
| 适合场景 | 图标/图表/logo | 游戏/图像处理 |
| 缩放表现 | 无限放大不模糊 | 放大变马赛克 |
8.5.3 常用图形魔法阵
基础形状够你画个简笔画全家福：
<svg width="300" height="300">
<!-- 哆啦A梦的圆脸 -->
<circle cx="150" cy="150" r="100" fill="#00a0e9" />
<!-- 胡须（路径绘制） -->
<path d="M80 150 Q150 130 220 150" stroke="black" fill="none"/>
<!-- 口袋（矩形+圆角） -->
<rect x="120" y="180" width="60" height="70" rx="10" fill="white"/>
<!-- 铃铛（组合图形） -->
<g transform="translate(150,200)">
<circle r="15" fill="gold"/>
<rect y="15" width="4" height="20" fill="brown"/>
</g>
</svg>8.5.4 实战：会跳舞的卡通角色
<svg id="dancer" width="400" height="400">
<!-- 身体 -->
<rect x="180" y="250" width="40" height="100" fill="#87CEEB" rx="10"/>
<!-- 头部 -->
<circle cx="200" cy="200" r="40" fill="#FFDAB9"/>
<!-- 动态手臂 -->
<path id="arm" d="M150 220 Q120 200 100 240"
stroke="#87CEEB" stroke-width="8"
fill="none" stroke-linecap="round">
<animate attributeName="d"
dur="1s"
values="M150 220 Q120 200 100 240;
M150 220 Q120 260 100 220;
M150 220 Q120 200 100 240"
repeatCount="indefinite"/>
</path>
<!-- 眨眼动画 -->
<g transform="translate(170,190)">
<circle r="8" fill="black"/>
<animateTransform attributeName="transform"
type="translate"
values="170,190;170,195;170,190"
dur="2s"
repeatCount="indefinite"/>
</g>
</svg>8.5.5 SVG生存手册
- 命名空间陷阱：独立SVG文件需要<?xml version="1.0"?>声明
- 视图框魔法：viewBox="0 0 100 100"是保持比例的秘密配方
- 性能警告：超过1000个图形会让浏览器卡成PPT
- CSS操控术：用CSS给SVG换皮肤：
svg circle {
fill: pink;
transition: fill 0.3s;
}
svg circle:hover {
fill: hotpink;
}JavaScript互动：
document.querySelector('svg path').addEventListener('click', () => {
alert('你戳中了SVG的穴位！');
});8.5.6 高级召唤术：SVG精灵图
<!-- symbols魔法书 -->
<svg style="display:none">
<symbol id="icon-home" viewBox="0 0 24 24">
<path d="M12 2L2 12h3v8h6v-6h2v6h6v-8h3L12 2z"/>
</symbol>
</svg>
<!-- 随时召唤 -->
<svg class="icon">
<use xlink:href="#icon-home"></use>
</svg>（同一个精灵图可以在页面无限复用，像哈利波特的守护神咒！）
（掏出矢量魔杖）下节课我们将融合SVG和CSS3，猜猜怎么用代码让这个跳舞小人穿上会飘动的仙女裙？