基本结构

一个简单示例：

1
2
3
4
5
6
7
8
9
10
11
12
<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>

以上代码显示效果如下：

svg示例图像

图片绘制流程：
1、svg 根元素：

  • version：指定当前 svg 使用的版本

  • baseProfile：指定当前 svg 渲染所需的语言概述

    值 描述
    none 最小svg语言配置
    full 正常概述，适用于PC
    basic 轻量级概述，适用于PDA
    tiny 更轻量的概述，适用于手机

  • svg2 不推荐使用 version 和 baseProfile 这两个属性

  • width、height：同 html 的宽高

  • xmlns：svg 命名空间。必须正确绑定命名空间！命名空间只是一些字符串，它的本意并不是要链接到某个地址。因为 URIs 的唯一性从而被广泛使用
    2、绘制一个宽高为 100% 的矩形，背景为红色
    3、半径为 80px 的绿色圆圈，向右偏移 150px，向下偏移 100px
    4、绘制白色文字 SVG，设置居中的锚点(text-anchor)把文字定位到期望的位置

坐标定位

SVG 使用坐标系统，以左上角为(0，0)坐标，x 轴正方向向右，y 轴正方向向下

1
<rect x="0" y="0" width="100" height="100" />

定义一个矩形，该矩形从左上角（即 0，0)开始，向右延展 100px,向下延展 100px，形成一个 100*100的矩形

1
<svg width="200" height="200" viewBox="0 0 100 100">

viewBox：是一个包含四个参数的列表min-x、min-y、’width和height，以空格或者逗号分隔。不允许宽和高为负值，如果他们的值小于或者等于0，则当前元素不渲染。以下元素可以使用viewBox`属性：

  • svg
  • symbol
  • image
  • marker
  • pattern
  • view

以上代码，视口大小为100*100，画布为200*200，最终效果就是只能显示画布的左上100*100的区域

基本形状

矩形

1
2
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

矩形示例

  • rx：圆角的 x 方位的半径
  • ry：圆角的 y 方位的半径

圆形

1
<circle cx="25" cy="75" r="20"/>

圆形示例

  • r：圆的半径
  • cx：圆心在 x 轴的位置
  • cy：圆心在 y 轴的位置

椭圆

1
<ellipse cx="75" cy="75" rx="20" ry="5"/>

椭圆示例

  • rx：椭圆的 x 半径
  • ry：椭圆的 y 半径
  • cx：圆心在 x 轴的位置
  • cy：圆心在 y 轴的位置

线条

1
<line x1="10" x2="50" y1="110" y2="150" stroke="green"/>

线条示例

  • x1：起点的 x 位置
  • x2：终点的 x 位置
  • y1：起点的 y 位置
  • y2：终点的 y 位置
  • stroke：线条的颜色

折线

1
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

折线示例

  • points：点集数列。每个点必须包含两个数字，第一个是 x 坐标，第二个是 y 坐标，中间用空格隔开。点坐标之间用逗号隔开

多边形

多边形(polygon)和折线很像，它们都是由一组点集合的直线构成。不同的是，多边形的路径在最后一个点处自动回到第一个点。如果需要，也可以用多边形创建一个矩形

1
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

多边形示例

  • points：同 折线

路径

直线命令

Move to

Move to：移动画笔到某个点。仅仅是移动画笔，但不画线。一般用在路径的开始处，用来指明从何处开始画

1
2
M x y // 绝对位置
m dx dy // 相对位置

Line to

Line to：在当前位置（L 前面画笔所在的位置）和新位置之间画一条线段

1
2
L x y // 绝对位置
l dx dy // 相对位置

H & V

H：绘制水平线
V：绘制垂直线

这两个命令都只带一个参数，标明在 x 轴或 y 轴移动到的位置

1
2
3
4
5
H x // 绝对位置
h dx // 相对位置

V y // 绝对位置
v dy // 相对位置
1
<path d="M10 10 H110 V110 H10 V10" stroke="black" />

图片示例

以上代码换成相对位置为：

1
<path d="M10 10 h100 v100 h-100 v-100" stroke="black" />

问题：

svg 填充颜色会自动闭合吗？

1
2
3
<svg version="'1.1" baseProfile="full" width="300" height="300" fill="skyBlue" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 H110 V110 H10 L55 55" stroke="red" />
</svg>

效果图

Z

Z：闭合路径。该命令会从当前点画一条直线到路径的起点。Z 命令不用区分大小写

上面的例子可以简化为：

1
2
3
<svg version="'1.1" baseProfile="full" width="300" height="300" fill="skyBlue" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 H110 V110 H10 Z" stroke="red" />
</svg>

曲线命令

贝塞尔曲线

三次贝塞尔曲线

用 C 命令创建三次贝塞尔曲线，需要设置三组坐标参数：

1
2
C x1 y1, x2 y2, x y
c dx1 dy1, dx2 dy2, dx dy

最后一个坐标 x,y 表示的是曲线的终点，x1,y1 是起点的控制点，x2,y2 是终点的控制点。控制点描述的是曲线起始点的斜率

可以将若干个贝塞尔曲线连起来，从而创建出一条很长的平滑曲线。如果一个点某一侧的控制点是它另一侧的控制点的对称（保持斜率不变）,可以使用一个简单的贝塞尔曲线命令 S

1
2
S x2 y2, x y
s dx2 dy2, dx dy

如果 S 命令单独使用，前面没有 S 或 C 命令，那当前点将作为第一个控制点；如果前面有 S 或 C 命令，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点

二次贝塞尔曲线

Q：用来确定起点和终点的曲线斜率。需要两组参数，控制点和终点坐标

1
2
Q x1 y1, x y
q dx1 dy1, dx dy

与 C 命令有个对应的 S 命令一样，Q 命令也有一个对应的 T 命令

1
2
T x y
t dx dy

弧形