SVG 基础

概述

SVG 与 HTML 一样是一种 XML 语言，用于绘制矢量图，与 HTML 一样，SVG 也提供了一些元素，同时支持使用 JavaScript 进行交互。

创建一个SVG

文件以 <svg></svg> 元素开始和结尾的 .svg 文件，其他 SVG 元素都位于 <svg></svg> 元素内，如下：

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">hello world</text>
</svg>

<svg> 中 version 、baseProfile 表示 SVG 的版本。xmlns 是SVG 绑定的命名空间。

SVG 的渲染规则是后来居上，即越后面的元素越可见。

嵌入

SVG 可以嵌入其他内容，如 图片、XML 等。

1. 嵌入图片：使用 <image> 元素嵌入图片。如：

   <image width="100" xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/>
   

样式

可以在 SVG 元素中使用属性设置元素的样式，如：

<path d="M100 100 L 400 400" stroke=”black" /> 

SVG 元素的属性有些是可以使用 CSS 来设置的，SVG 规范将属性分为properties 和其他 attributes，其中 properties 可以使用 CSS 来设置。

使用 CSS 设置属性方法：

1. 使用 style 属性直接插入到元素中，如：

   <path d="M100 100 L 400 400" style="stroke: black" /> 
   

2. 使用 <defs> 和 <style> 元素设置属性，如：

   <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
     <defs>
       <style type="text/css"><![CDATA[
          #app {
            stroke: black;
          }
       ]]></style>
     </defs>
     <path d="M100 100 L 400 400" id="app" /> 
   </svg>
   

3. 使用外部样式表，如：

   <?xml version="1.0" standalone="no"?>
   <?xml-stylesheet type="text/css" href="style.css"?>
   
   <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
     <path d="M100 100 L 400 400" id="app" /> 
   </svg>
   

基本形状

1. 矩形：

   <rect
     x = 矩形左上角的x位置
     y = 矩形左上角的y位置
     rx = 圆角的x方位的路径
     ry = 圆角的y方位的路径
     width = 矩形的宽度
     height = 矩形的高度
   ></rect>
   

2. 圆型：

   <circle
     r = 圆的半径
     cx = 圆心的x位置
     cy = 圆心的y位置
   ></circle>
   

3. 椭圆:

   <ellipse
     rx = 椭圆的x半径
     ry = 椭圆的y半径
     cx = 椭圆中心的x位置
     cy = 椭圆中心的y位置  
   ></ellipse>
   

4. 线条：

   <line
     x1 = 起点的x位置
     x2 = 起点的y位置
     x2 = 起点的x位置
     y2 = 起点的y位置
   ></line>
   

5. 折线：

   <polyline
     points = 点集数列。每个点包含两个数字，分别表示点的x、y坐标，数字之间用空格分隔，点与点之间用逗号分隔，如：10 0,11 10,12 13
   ></polyline>
   

6. 多边形：

   <polygon
     points = 点集数列。点集数列。每个点包含两个数字，分别表示点的x、y坐标，数字之间用空格分隔，点与点之间用逗号分隔，如：10 0,11 10,12 13
   >
   </polygon>
   

   注：多边形在绘制完成时，会将起点和终点连接起来组成闭合图形。

7. 路径：

   <path
     d = [命令+参数]的序列。[命令]用英文字母表示，每一个[命令]都有大写和小写两种方式，大写表示采用绝对定位；小写表示采用相对定位（相对于上一个点的定位），例如[d = M 10 10 m 20 20]中[m]表是的点是从[M点]向[x轴]移动[20]，向[y]轴移动[20]，这里[m 20 20]转换为绝对定位是[M 30 30]。
   >
   </path>
   

   直线命令：

   1. M 或 m ：表示将画笔移动到指定点，M 有两个参数，分别表示点的 x 、y 坐标，如：M x y 或 m x y 。注意，它只表示将画笔移动到某点，并不会画图。

   2. L 或 l ：表示从之前点到当前点画一条线段，当前位置是 L 所在的点，之前点是 L 之前的点。L 有两个参数，分别表示点的 x 、y 坐标，例如：L x y 或 l x y 。

      示例：画两条线段

      <path d="M10 10 M 30 30 L 40 40 M 50 50 L 60 60" stroke="black"/>
      

      表示从点 (30,30) 到点 (40, 40) 画一条线段，从点 (50, 50) 到点 (60, 60) 画一条线段，注意，因为 L 40 40 最近的点是 M 30 30 所以没用到 M 10 10 。

   3. H 或 h ：绘制水平线，H 绘制水平线时，会使用之前点的 y 坐标，所以只有一个参数，表示点的 x 坐标，例如：H x 或 h x 。

      示例：绘制一条从点 (50,50) 到 (100,50) 的线段

      <path d="M10 10 M 50 50 H 100" stroke="black"/>
      

      没有用到点 (10,10)

   4. V 或 v ：绘制垂直线，V 绘制垂直线时，会使用之前点的 x 坐标，所以只有一个参数，表示点的 y 坐标，例如：V x 或 v x 。

      示例：绘制一条从点 (50,50) 到 (50,100) 的线段

      <path d="M10 10 M 50 50 V 100" stroke="black"/>
      

   5. Z 或 z ：闭合命令，从当前点绘制一条直线到路径的起点，Z 没有参数，当前点值 Z 之前的点。。

      示例：绘制一个从经过点 (10, 10) 、(20, 10)、(15,15) 的三角形

      <path d="M10 10 L 20 10 L 15 15 Z" stroke="black"/>
      

   曲线命令：

   1. Q 或 q ：二次贝塞尔曲线，从之前点根据控制点绘制一条到当前点的二次贝塞尔曲线，有两组参数，分别表示控制点和当前点，例如：Q x1 y1, x y 或 q x1 y1, x y ，其中 x1 y1 表示控制点，x y 表示当前点。

      示例：以点 (60,10) 作为控制点，绘制一条从点 (10,10) 到 (70,70) 的二次贝塞尔曲线

      <path d="M10 10 Q 60 10 70 70" stroke="black" fill="transparent"/>
      

   2. C 或 c ：三次贝塞尔曲线，从之前点根据两个控制点绘制一条到当前点的三次贝塞尔曲线，有三组参数，分别表示两个控制点和当前点，例如：C x1 y1, x2 y2, x y 或 c x1 y1, x2 y2, x y ，其中 x1 y1 、x2 y2 表示控制点，x y 表示当前点。

      示例：以点 (20,50) 、(20,-50)作为控制点，绘制一条从点 (10,10) 到 (70,70) 的二次贝塞尔曲线

      <path d="M10 10 C 20 50 20 -50 70 70" stroke="black" fill="transparent"/>
      

   3. S 或 s ：三次贝塞尔曲线，从之前点根据两个控制点绘制一条到当前点的三次贝塞尔曲线，有两个参数，分别表示两个控制点中的一个和当前点（另有一个控制点会根据之前点计算），例如：S x1 y1, x y 或 s x1 y1, x y ，其中 x1 y1 表示控制点，x y 表示当前点。

      注，如果 S 跟在 C 或 S 命令后面，它的第一个控制点会被设定成前一个命令曲线的第二个控制点的中心对称点。如果 S 前面没有 C 或 S 命令，那么当前点将作为第一个控制点。

      示例：略

   4. A 或 a ：弧形。根据椭圆的长半轴和短半轴，和在椭圆上的两点可以绘制出两种椭圆，每种椭圆根据两点又能画出两种弧形，所以根据椭圆的半轴和椭圆上的两点绘制的弧形是不唯一的，需要其他参数确定唯一的弧形。

      A 或 a 的参数如下：

      A rx ry x-axis-rotation large-arc-flag sweep-flag x y
      a rx ry x-axis-rotation large-arc-flag sweep-flag x y
      

      rx ry 表示 x 、y 轴半径

      x-axis-rotation 表示 x 轴的旋转角度。

      large-arc-flag 表示角度大小。

      sweep-flag 表示 弧线方向、

      x y 表示弧形的终点

渐变

SVG 中的渐变有线性渐变和径向渐变两种，为了复用渐变定义在 <defs> 标签内部，需要给渐变指定一个 id 方便元素引用。

线性渐变：沿直线改变称为线性渐变。

• <linearGradient> ：声明线性渐变。

• <stop> ：设置渐变单元。

  <stop
    offset = 偏移
    stop-color = 当前颜色
    stop-opacity = 当前透明度
  >
  </stop>
  

• 一个线性渐变由 <linearGradient><linearGradient/> 元素，和它内部的若干 <stop /> 组成，如：绘制从 黑色 到 蓝色 再到 黄色 的渐变色，并作为矩形的填充色。

  <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="ex">
        <stop stop-color="black" offset="0%" />
        <stop stop-color="blue" offset="50%" />
        <stop stop-color="yellow" offset="100%" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="200" height="200" fill="url(#ex)" />
  </svg>
  

  注意，元素中使用 url() 来引用定义的渐变。

径向渐变：从一点开始发散称为径向渐变。

• <radialGradient> ：声明径向渐变。

  <radialGradient
    cx、cy、r = 渐变结束时的圆环。cx、cy是圆环的中心点，r是圆环的半径。
    fx、fy = 渐变的中心
  ></radialGradient>
  

• <stop> ：设置渐变单元，参数与线性渐变一致。

变形

<g>：集合元素，将元素归为一个集合，为 <g> 设置的属性，将应用到集合内的所有元素上。

transform：变形属性，为元素设置变形，它可以取如下值：

1. translate(x,y) ：平移，将元素平移到 (x,y) 位置。
2. rotate(num) ：旋转。
3. skewX(num) 、skewY(num) ：斜切。
4. scale(num, num)：缩放。
5. matrix()：复杂变形，暂略。

裁剪

裁剪指移除元素的部分内容。<clipPath> 用来定义裁剪，应用裁剪的元素在渲染的时候，被裁剪遮住的部分才会渲染。

元素：<clipPath>

示例：定义一个矩形，并对矩形应用裁剪。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="ex-clip">
      <rect x="10" y="100" width="50" height="200" />
    </clipPath>
  </defs>
  <rect x="10" y="10" width="50" height="200" clip-path="url(#ex-clip)" />
  <rect x="70" y="10" width="50" height="200"/>
</svg>

遮罩

遮罩指给元素蒙上一层幕布。<mask> 用来定义遮罩。

元素：<mask>

示例：定义一个矩形，并为它加一层遮罩

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="ex-mask">
      <rect x="10" y="100" width="50" height="200" fill="red" />
    </mask >
  </defs>
  <rect x="10" y="10" width="50" height="200" fill="yellow" mask="url(#ex-mask)" />
  <rect x="70" y="10" width="50" height="200"/>
</svg>

注意：没有被遮罩的部分好像变为了白色，不知道为什么？

文字

SVG 中有两种不同的文本模式，一种是写在图像中的文本，另一种是 SVG 字体。

文本：

1. 元素：<text>

   属性：

   x 、y ：在视口中的位置。

2. 元素：<tspan>

   描述：作为 <text> 元素的子元素使用，用来表示一个文本段落。

   属性：

   x、y ：设置 <tspan> 的绝对坐标，它会脱离默认的文本位置，可以是一个数列，如果是一个数列，则数列将一个一个应用到 <tspan> 元素内的每一个字符上。

   dx 、dy ：设置 <tspan> 的相对坐标，可以是一个数列，如果是一个数列，则数列将一个一个应用到 <tspan> 元素内的每一个字符上。

   rotate ：将所有字符旋转一个角度，可以是一个数列，如果是一个数列，则数列将一个一个应用到 <tspan> 元素内的每一个字符上。

3. 元素：<tref>

   描述：作为 <text> 元素的子元素使用，用来引用一个已经定义的文本。

   属性：

   xlink:href ：引用的文本。

4. 元素：<textPath>

   描述：作为 <text> 元素的子元素使用，引用一个路径，把字符对齐到路径，字符会绕着路径走。

   属性：

   xlink:href ：引用的路径。

5. 示例：

   <text id='ex_text'>引用的文本</text>
   <path id="ex_path" d="M 20,20 C 40,40 80,40 100,20"/>
   <text>
     文本内容
     <tspan>另一段内容</tspan>
     <tref xlink:href="#ex_text" />
     <textPath xlink:href="#my_path">绕着路径走</textPath>
   </text>
   

线条属性

线条属性是描述线条样式的属性

1. stroke ：设置对象线条的颜色。

2. stroke-opacity ：设置线条的透明度。

3. stroke-width ：设置线条的宽度。

4. stroke-linecap ：控制边框终点的形状。

   参数：

   butt ：直边结束线段。

   square ：直边结束线段，但是会稍微超出实际路径的范围，超出的大小由stroke-width控制。

   round ：圆角结束线段，圆角的半径由stroke-width控制。

5. stroke-linejoin ：两条线段之间用什么方式连接。

   miter ：默认值，在连接处形成尖角。

   round ：在连接处形成圆角。

   bevel ：在连接处形成尖角，但是尖角的尖端会被切掉。

6. stroke-dasharray ：将线条变为虚线。

填充属性

填充属性是描述元素内样式的属性。

1. fill ：设置对象内部的颜色。
2. fill-opacity ：设置填充色的透明度。

图案

图案用来定义元素的填充，需要放在 <defs> 元素内，图案可以包含任何其他元素来共同组成图案，然后作为元素的填充使用。