Grimoire

# SVG

  • 一种 XML 语言，类似 XHTML，可以用来绘制矢量图形
  • 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形

注意：

  • SVG 的元素和属性必须按标准格式书写，因为 XML 是区分大小写的（这一点和 HTML 不同）
  • SVG 里的属性值必须用引号引起来，就算是数值也必须这样做。

# 简单的例子

SVG 
<svg
  version="1.1"
  baseProfile="full"
  width="300"
  height="200"
  xmlns="http://www.w3.org/2000/svg"
>
  <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Expand Copy

绘制流程：

  1. 从 svg 根元素开始
  • svg 2 之前使用 version baseProfile 两个属性来识别 svg 的版本，svg 2 不推荐使用这两个属性
  • xmlns 绑定命名空间
  1. 绘制一个矩形区域 <rect/> 背景设置为红色 fill='red'
  2. 绘制一个绿色圆形在中心（x 轴偏移 150，y 轴偏移 100）
  3. 绘制文字

规则是后来居上，越后面的元素越可见

# 坐标定位

网格：对于所有元素，SVG 使用的坐标系统或者说网格系统，和 Canvas 用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。在 HTML 文档中，元素都是用这种方式定位的。

坐标

# 基本形状

# 矩形

属性 说明
x 左上角x坐标
y 左上角y坐标
width 宽度
height 高度
rx 圆角 x 方位半径
ry 圆角 y 方位半径
<svg>
  <rect x="10" y="10" width="30" height="30" />
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" />
</svg>
1
2
3
4
Expand Copy

# 圆形

属性 说明
r 半径
cx 圆心的 x 坐标
cy 圆心的 y 坐标
<svg>
  <circle cx="25" cy="75" r="20" />
</svg>
1
2
3
Expand Copy

# 椭圆

属性 说明
rx 横轴半径
ry 纵轴半径
cx 圆心的 x 坐标
cy 圆心的 y 坐标
<svg>
  <ellipse cx="75" cy="75" rx="20" ry="10" />
</svg>
1
2
3
Expand Copy

# 线

属性 说明
x1 起点 x 坐标
y1 起点 y 坐标
x2 终点 x 坐标
y2 终点 y 坐标
<svg>
  <line x1="10" x2="50" y1="110" y2="150" />
</svg>
1
2
3
Expand Copy

# 直线

属性 说明
x1 起点 x 坐标
y1 起点 y 坐标
x2 终点 x 坐标
y2 终点 y 坐标
<svg>
  <line x1="10" x2="50" y1="110" y2="150" stroke="red" />
</svg>
1
2
3
Expand Copy

# 折线

属性 说明
points 所有点的坐标
<svg>
  <polyline points="50 50, 50 100, 100 100, " stroke="red" fill="none" />
</svg>
1
2
3
Expand Copy

# 多边形

属性 说明
points 所有点的坐标
<svg>
  <polygon points="50 50, 50 100, 100 100, " stroke="red" fill="none" />
</svg>
1
2
3
Expand Copy

# 路径

属性 说明
d 命令+参数 的序列

<path> 元素是 SVG 基本形状中最强大的一个。你可以用它创建线条, 曲线, 弧形等等。

只需要设定很少的点，就可以创建平滑流畅的线条（比如曲线）。虽然 polyline 元素也能实现类似的效果，但是必须设置大量的点

大写表示绝对定位，小写表示相对定位

直线命令：

  • M x y or m dx dy => move to
    • 只会移动画笔不会画线，常用来指明从何处开始
  • L x y or l dx dy => line to
    • 将会在当前位置和新位置画一条线段
  • H x (or h dx)
  • V y (or v dy)
    • 绘制水平线和垂直线
  • Z or z
    • 闭合路径

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths

← requestAnimationFrame →