概述

Scalable Vector [ˈvektə(r)] Graphics [ˈgræfɪks] 可伸缩的矢量图形。99年由 W3C 发布，在 2013 年成为了 W3C 推荐标准。它是使用 HTML 来描述二维图形和绘图程序的语言。只需要定义好属性就可以获得一个用于网络的基于矢量的图形，特点在于改变尺寸也不损失图形质量。

图形被分为：位图 和 矢量图

1. 位图

位图都是像素点成的

  • 它的优点在于：
    1. 色彩丰富；
    2. 图片效果逼真；
  • 位图的缺点：
    1. 放大缩小会导致图片失真；

2. 矢量图

矢量图：由数学上一系列算法计算出的图形，通常使用于绘画几何图形。

  • 矢量图的优点：
    1. 图片放大缩小不会失真。因为会动态计算图形，很适合制作地图；
    2. 可以被很多工具读取和修改，比如记事本；
    3. 与 gif、jpeg 相比尺寸更小，可压缩性更高；
  • 矢量图的缺点：
    1. 色彩较少；
    2. 对于不会书写 SVG 的人员来说无法修改

SVG 常用 shapes

svg 标记都是单标记。

  • 线 <line>
  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

1. 绘制线条

<line> 标记绘制直线

  • x1 y1 : 第一个点的坐标

  • x2 y2 : 第二个点的坐标

    1. <svg width="100" height="100">
    2.   <line x1="5" y1="5" x2="50" y2="20" stroke="#000" stroke-width="5">
    3. </svg>

    1.1 描边 stroke

  • g 表示一组

  • stroke-width 描边宽度，类似于 border-width
  • stroke 描边
    • none
    • 颜色值
    • currentColor 继承父级的 color 值
  • stroke-linecap 描边端点表现方式
    • butt
    • round
    • square

SVG - 图1

  • stroke-linejoin 描边转角的表现方式
    • miter
    • round
    • bevel

SVG - 图2

  • stroke-miterlimit 描边相交（锐角）表现方式，默认4
  • stroke-dasharray 虚线描边
    • none 不是虚线
    • 为一个逗号或空格分隔的数值列表，表示各个虚线端的长度，可以是长度值，可以是百分比值
  • stroke-dashoffset 虚线的起始偏移
  • stroke-opacity 描边透明度，默认为1

2. 创建矩形 rect

<rect> ：绘制矩形的标记

  • x y ：原点坐标点

  • fill ：填充色

    1. <svg width="100" height="100">
    2.   <rect x="10" y="10" width="80" height="80" fill="rgba(255,0,0,.5)"></rect>
    3. </svg>

    执行结果：image.png

    2.2 圆角矩形

  • x y：原点坐标

  • rx 和 ry ：定义圆角的半径，类似于 border-radius

    1. <svg width="100" height="100">
    2.   <rect x="10" y="10" width="80" height="80" fill="rgba(255,0,0,.5)" rx="10" ry="10"></rect>
    3. </svg>

    执行结果：image.png

    2.3 半透明的矩形

  • fill-opacity：填充色的半透明度

  • stroke-opacity：描边的半透明度
    1. <svg  width="100" height="100">
    2.   <rect x="10" y="10" width="80" height="80" fill="rgba(255,0,0,.5)" stroke="rgba(255,0,0,.9)" stroke-width="5" fill-opacity=".1" stroke-opacity=".1"></rect>
    3. </svg>
    执行结果：image.png

    3. 创建圆形 circle

<circle> 用来创建一个圆

  • cx 、 cy ：定于圆中心的 x 和 y 坐标，如果没有这个属性，原点会被设置为 (0,0)
  • r ：圆半径
  • stroke ：描边颜色
  • stroke-width ：边框颜色
  • fill ：填充色
    1. <svg width="100" height="100">
    2.     <circle cx="50" cy="50" r="40" stroke="orange" stroke-width="2" fill="yellow"></circle>
    3. </svg>
    执行结果：image.png

    4. 创建椭圆 ellipse

<ellipse> 绘制椭圆标记

  • cx cy ：定义椭圆中心点坐标
  • rx ry 定义圆角半径
    1. <svg width="100" height="100">
    2.   <ellipse cx="50%" cy="50%" rx="50" ry="40" fill="rgba(255,255,0,.5)"></ellipse>
    3. </svg>
    执行结果：image.png

    5. 多边形 polygon

<polygon> 标记弥补了 <line> 只能画一条线的不足，使用它可以创建一个多边形

  • 使用 points 属性，找到每一个点的坐标，点与点之间使用空格隔开
  • 下面这段代码中，第一个点的坐标就在 (50,0) 处，第二个坐标就在 (0,100) 处，最后个坐标 (100,100)
    1. <svg width="100" height="100">
    2.   <polygon points="50,0 0,100 100,100" stroke="rgba(255,0,0,.5)" fill="rgba(255,0,0,.5)"></polygon>
    3. </svg>
    1. <svg>
    2.   <polygon points="0,0 100,0 0,100 100,100" stroke-width="2" stroke="#ccc" fill="yellow" fill-rule="nonzero"></polygon>
    3. </svg>
    执行结果：image.png

    6. 创建折线 polyline

<polyline> 标记绘制折线

  • 使用 polyline 标记，找到每个点的坐标，点与点之间使用空格隔开
  • polyline 用于创建任何只有直线的形状
  • 注意这里的 fill 属性，值设置为了 none
    1. <svg>
    2.   <polyline points="10,5 80,5 10,80 80,80" stroke="#000" fill="none"></polyline>
    3. </svg>

    7. 路径 path

<path> 是 svg 中比较强大和复杂的元素了，你可以通过 svg 在线编辑器：http://editor.method.ac/ 绘制图形

  1. <svg>
  2.   <path stroke-width="5" stroke="orange" d="M 10 10 L 20 20"></path>
  3. </svg>
  1. <svg>
  2.     <g>
  3.         <text x="5" y="20">stroke 栗子～</text>
  4.         <path stroke-width="10" stroke="orange" d="M 10 30 L 90 30"></path>
  5.         <path stroke-width="10" stroke="orange" stroke-linecap="round" d="M 10 50 L 90 50" ></path>
  6.         <path stroke-width="10" stroke="orange" stroke-dasharray="3,4" d="M 10 70 L 90 70" ></path>
  7.     </g>
  8. </svg>

下面的命令可用于定义路径，允许大小写，大写表示绝对定位，小写表示相对定位

  • M = moveto 移动到坐标
  • L = lineto 线条，绘制直线到坐标
  • H = horizontal lineto 绘制水平线到坐标
  • V = vertical lineto 绘制垂直线到坐标
  • C = curveto 绘制曲线到坐标
  • S = smooth curveto 绘制光滑的曲线到坐标
  • Q = quadratic Bezier curve 绘制贝塞尔曲线到坐标
  • T = smooth quadratic Bezier curveto 绘制光滑的二次贝塞尔曲线到坐标
  • A = elliptical Arc 绘制椭圆弧到坐标
  • Z = closepath 闭合路径

我们使用路径的方式再画一次三角形

  1. <svg>
  2.     <path d="M 50 0 L 0 100 L 100 100 L 50 0" stroke="#000" fill="none"></path>
  3. </svg>

8. 生成文字 text

<text> 绘制文字标记

  • x：文字的 x 坐标
  • y：文字的 y 坐标
  • dx：x 轴偏移坐标
  • dy：y 轴偏移坐标
  • rotate：文字旋转角度
  • textlength：渲染的文字所占据长度，可以用来设置字间距
  • lengthAjust：使用哪种方式来渲染文字占据长度
    1. <svg>
    2.   <text x="10" y="10" font-size="14" font-weight="bold" rotate="30" textlength="100">好棒棒耶～</text>
    3. </svg>

    9. 渐变

线性渐变

  • x1 y1 、x2 y2 的点就是渐变的开始结束点坐标

水平的渐变

  1. <svg>
  2.     <defs>
  3.         <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linear1">
  4.             <stop offset="0%" stop-color="pink" stop-opacity="1"></stop>
  5.             <stop offset="100%" stop-color="skyblue" stop-opacity="1"></stop>
  6.         </linearGradient>
  7.     </defs>
  8.     <ellipse cx="150" cy="75" rx="85" ry="55" style="fill: url(#linear1)"></ellipse>
  9. </svg>

垂直的渐变

  1. <svg>
  2.     <defs>
  3.         <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="linear1">
  4.             <stop offset="0%" stop-color="pink" stop-opacity="1"></stop>
  5.             <stop offset="100%" stop-color="skyblue" stop-opacity="1"></stop>
  6.         </linearGradient>
  7.     </defs>
  8.     <ellipse cx="150" cy="75" rx="85" ry="55" style="fill: url(#linear1)"></ellipse>
  9. </svg>

经向渐变

  1. <svg>
  2.     <defs>
  3.         //cx cy：颜色的起始点坐标 r：扩散范围  fx：渐变的终点
  4.         <radialGradient id="radial1" cx="20%" cy="20%" r="60%" fx="50%">
  5.             <stop offset="0%" stop-color="yellow" stop-opacity="1"></stop>
  6.             <stop offset="100%" stop-color="orange" stop-opacity="1"></stop>
  7.         </radialGradient>
  8.     </defs>
  9.     <ellipse cx="150" cy="75" rx="75" ry="75" style="fill: url(#radial1)"></ellipse>
  10. </svg>

10. 其他

让图形可点击

  1. <svg>
  2.     <a href="#">
  3.         <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
  4.     </a>
  5. </svg>

带有动画效果的 svg

  1. <svg>
  2.     <rect width="100" height="100" x="20" y="20" fill="blue">
  3.     //repeatCount 持续时间
  4.         <animate attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite"></animate>
  5.     </rect>
  6. </svg>
  1. <svg>
  2.     <rect x="20" y="20" width="100" height="100">
  3.         <animate attributeName="width" from="100" to="150" dur="5s" repeatCount="indefinite"></animate>
  4.         <animate attributeName="x"  begin="0s" dur="5s" from="0" to="300" repeatCount="indefinite"></animate>
  5.         <animate attributeName="fill"  from="pink" to="orange" begin="0s" dur="4s"></animate>
  6.     </rect>
  7. </svg>
  10. 文字的动画
  13. <svg>
  14.     <g transform="translate(0,20)">
  15.         <text id="textRun" x="0" y="0">
  16.             test text run
  17.             <animateMotion path="M 0 0 L 100 100" dur="3s"/>
  18.         </text>
  19.     </g>
  20. </svg>