Gauss Zhou

# SVG 入门

# 一个简单的例子

<svg width="300" height="200">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
SVG

绘制流程包括以下几步：

  • 从svg根元素开始
  • 绘制一个完全覆盖图像区域的矩形 <rect/>，把背景颜色设为红色
  • 一个半径 80px 的绿色圆圈<circle/>绘制在红色矩形的正中央
  • 绘制文字“SVG”。文字被填充为白色， 通过设置居中的锚点把文字定位到期望的位置

# 渲染顺序

最值得注意的一点是元素的渲染顺序。SVG 文件全局有效的规则是 “后来居上”，越后面的元素越可见。

一个简单的例子
渲染顺序