让图形随心所动：HTML5 内联 SVG 速绘手册

SVG 用「坐标 + 公式」画图，放大 800% 依旧锋利；把它直接写进 HTML，还能被 CSS 染成任意色、让 JS 牵着走。下面这份「速绘手册」带你 30 分钟完成第一张可交互矢量图。

1. 先把 SVG 塞进页面

<svg id="demo" width="400" height="200" viewBox="0 0 400 200">
  <!-- 图形写在这里 -->
</svg>

viewBox 是幕后坐标系，前俩数字表示左上角，后俩数字表示宽高；想让它自动撑满父级，只留 viewBox 即可。

2. 画点什么——矩形、圆、文字

<!-- 矩形 -->
<rect x="50" y="20" width="150" height="100" fill="#5B8FF9" rx="8"/>

<!-- 圆 -->
<circle id="puddle" cx="300" cy="70" r="50" class="blob"/>

<!-- 文字 -->
<text x="50" y="100" font-size="35" fill="#fff">Hello</text>

属性对照一句口诀：位置用 x/y（矩形左上角、圆心），大小用 width/height 或 r，颜色用 fill，圆角再加 rx。

3. 一键换色——CSS 直接管

.blob{ fill:orange; transition:.3s }
.blob:hover{ fill:tomato }

SVG 元素就是 DOM 节点，伪类、媒体查询、CSS 变量全吃；把 fill/stroke 当 background/border 用就行。

4. 让圆会跳——两种动画思路

1. 纯 CSS（适合简单补间）

@keyframes pulse{
  50%{ transform:scale(1.2); }
}
.blob{ animation:pulse 1s infinite; }

2. 内嵌 <animate>（无需 CSS，也能暂停）

<circle ...>
  <animate attributeName="r" values="50;70;50" dur="1s" repeatCount="indefinite"/>
</circle>

想沿着自定义路径跑？换上 <animateMotion> + <mpath> 即可。

5. 点击出彩蛋——JS 操作属性

const puddle = document.getElementById('puddle');
puddle.addEventListener('click', () => {
  puddle.setAttribute('fill', '#' + Math.random().toString(16).slice(-6));
});

SVG 里所有数值都是可写属性：setAttribute('r', 60)、setAttribute('stroke-width', 4) 随时改。

6. 实战：一条线自己画出来

<svg width="280" height="80" viewBox="0 0 280 80">
  <path id="wire" d="M10 40 H270" stroke="#2F80ED" stroke-width="4"
        stroke-dasharray="260" stroke-dashoffset="260"/>
  <style>
    #wire{ animation:draw 2s ease forwards }
    @keyframes draw{ to{ stroke-dashoffset:0 } }
  </style>
</svg>

把实线当成「虚线缺口」全部藏起来，然后让 stroke-dashoffset 归零，线条就看起来像被一笔画出——公众号里超火的「手写签名」就是这招。

7. 什么时候用内联，什么时候用外链？

8. 小结带走

SVG 就是「用代码画图」：

• 坐标系 + 标签 = 形状
• CSS = 颜料 + 动画
• JS = 遥控器

把 <svg> 扔进 HTML，立刻拥有无损缩放、随意改色、事件绑定三大超能力；下回做 Logo、动效、图表，别再一股脑往位图冲了——矢量才是未来。