85. SVG 入门与基础形状

本节目标：理解 SVG 是什么，学会用标签绘制基本矢量图形。

SVG 是”可缩放矢量图形”的缩写。和 Canvas 不同，SVG 用 XML 标签描述图形，每个形状都是独立的 DOM 节点。放大缩小都不会失真，特别适合做图标和图表。

嵌入 SVG

SVG 可以直接写在 HTML 里：

<svg width="400" height="300">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>

也可以作为 .svg 文件用 <img> 或 CSS background-image 引入。

基本形状

SVG 提供了一系列标签来画基本形状。

矩形：rect

<rect x="50" y="50" width="100" height="80" fill="blue" />

x, y：左上角坐标
width, height：宽高
fill：填充颜色
stroke：边框颜色
stroke-width：边框宽度

圆角矩形：

<rect x="50" y="50" width="100" height="80" rx="10" ry="10" fill="green" />

rx 和 ry 控制圆角大小。

圆形：circle

<circle cx="100" cy="100" r="50" fill="orange" />

cx, cy：圆心坐标
r：半径

椭圆：ellipse

<ellipse cx="100" cy="100" rx="80" ry="40" fill="purple" />

rx：X 方向半径
ry：Y 方向半径

直线：line

<line x1="20" y1="20" x2="180" y2="180" stroke="black" stroke-width="2" />

x1, y1：起点
x2, y2：终点

折线：polyline

<polyline points="20,100 60,20 100,100 140,20 180,100" 
          fill="none" stroke="blue" stroke-width="2" />

points 是一串坐标点，依次连线。

多边形：polygon

<polygon points="100,20 180,180 20,180" fill="yellow" stroke="black" />

和 polyline 类似，但会自动闭合。上面画了一个三角形。

路径：path

path 是 SVG 最强大的元素，可以画任意形状。

<path d="M 50 50 L 150 50 L 100 150 Z" fill="pink" />

d 属性里的命令：

命令	含义
`M x y`	移动到 (x, y)
`L x y`	画线到 (x, y)
`Z`	闭合路径
`C x1 y1 x2 y2 x y`	三次贝塞尔曲线
`Q x1 y1 x y`	二次贝塞尔曲线
`A rx ry x-axis-rotation large-arc sweep x y`	圆弧

Note

命令字母大写表示绝对坐标，小写表示相对坐标。M 50 50 是绝对定位，m 50 50 是相对当前位置偏移。

样式设置

SVG 的样式可以用属性设置，也可以用 CSS：

<circle cx="100" cy="100" r="50" 
        fill="red" 
        stroke="black" 
        stroke-width="3"
        opacity="0.8" />

或者用 style 属性：

<circle cx="100" cy="100" r="50" style="fill:red; stroke:black; stroke-width:3;" />

SVG 与 Canvas 的选择

场景	推荐
图标、Logo	SVG
数据图表	SVG
照片处理	Canvas
游戏动画	Canvas
需要缩放不失真	SVG
像素级操作	Canvas

完整示例

<svg width="300" height="200">
  <!-- 背景 -->
  <rect width="300" height="200" fill="#f0f0f0" />
  
  <!-- 太阳 -->
  <circle cx="250" cy="50" r="30" fill="yellow" />
  
  <!-- 山 -->
  <polygon points="0,200 100,80 200,200" fill="#6b8e23" />
  <polygon points="100,200 200,60 300,200" fill="#556b2f" />
  
  <!-- 路 -->
  <path d="M 0,200 Q 150,150 300,200" stroke="gray" stroke-width="15" fill="none" />
</svg>

小结

SVG 是矢量图，缩放不失真
rect、circle、ellipse、line、polygon 画基本形状
path 最强大，可以画任意形状
SVG 元素是 DOM 节点，可以用 CSS 和 JavaScript 操控
图标、图表优先选 SVG