SVG了解与绘图应用

一、认识SVG

（一）概念：

• SVG 意为可缩放矢量图形（Scalable Vector Graphics）
• 是使用 XML 来描述二维图形和绘图程序的语言
• SVG 用来定义用于网络的基于矢量的图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

（二）优点：

• SVG 可被非常多的工具读取和修改（比如记事本）
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG 可以与 JavaScript 技术一起运行
• SVG 是开放的标准  与其他标准（比如 XSL 和 DOM）相兼容
• SVG 文件是纯粹的 XML

二、SVG的使用方式

• SVG 文件推荐使用 .svg（全部小写）作为扩展名

• SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg>

• width 和 height 属性可设置此 SVG 文档的宽度和高度

• version 属性可定义所使用的 SVG 版本

• xmlns 属性可定义 SVG 命名空间

• 关闭标签 </svg> 的作用是关闭 SVG 元素和文档本身

• SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>

• SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件

  示例:

<svg version="1.1" baseProfile="full" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" stroke="lightblue" stroke-width="4" fill="pink" />
  <circle cx="150" cy="150" r="100" fill="skyblue" />
  <text x="150" y="150" font-size="20" text-anchor="middle" fill="white">SVG</text>
</svg>

  效果图:

三、 SVG绘图

（一）绘制矩形

rect的属性：

• width 和 height 属性可定义矩形的高度和宽度
• x 属性定义矩形的左侧位置
• y 属性定义矩形的顶端位置
• rx 和 ry 属性可使矩形产生圆角

css的属性：

• fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
• stroke-width 属性定义矩形边框的宽度
• stroke 属性定义矩形边框的颜色
• fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
• stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
• opacity 属性用于定义了元素的透明值 (范围: 0 到 1)

  示例：

  普通矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="20" y="20" width="200" height="100" 
        style="fill:rgb(114, 173, 207);stroke-width:3;stroke:rgb(79, 103, 221)";stroke-opacity:0.7 />
</svg>

  圆角矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="20" y="20" rx="20" ry="20" width="150" height="100"
        style="fill:pink;stroke:rgb(90, 134, 230);stroke-width:5;opacity:0.5"/>
</svg>

  效果图：

   

（二）绘制圆形

•  cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
•  r属性定义圆的半径

  示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle cx="100" cy="50" r="45" stroke="pink" stroke-width="2" fill="skyblue" />
</svg>

  效果图：

（三）绘制椭圆

• CX属性定义的椭圆中心的x坐标
• CY属性定义的椭圆中心的y坐标
• RX属性定义的水平半径
• RY属性定义的垂直半径

  示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <ellipse cx="120" cy="80" rx="100" ry="50"
        style="fill:rgb(97, 187, 212);stroke:pink;stroke-width:2"/>
</svg>

  效果图：

（四）绘制直线

• x1 属性在 x 轴定义线条的开始
• y1 属性在 y 轴定义线条的开始
• x2 属性在 x 轴定义线条的结束
• y2 属性在 y 轴定义线条的结束

  示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <line x1="10" y1="10" x2="50" y2="50"
        style="stroke:skyblue;stroke-width:2"/>
</svg>

  效果图：

（五）绘制多边形

• <polygon> 标签用来创建含有不少于三个边的图形
• points 属性定义多边形每个角的 x 和 y 坐标
• 多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）

• fill-rule 属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” （内部区域将被填充）

  有效值:	nonzero | evenodd | inherit
  默认值:	nonzero
  应用于:	shape形状类元素 和 文字内容类元素
  nonzero	字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。
  evenodd	字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。
  动画可用:	是

  示例：

 <!-- 三角形 -->
    <svg height="210" width="500">
        <polygon points="200,10 250,190 160,210" style="fill:lightblue;stroke:pink;stroke-width:1" />
    </svg>
<!-- 四边形 -->
    <svg height="250" width="500">
        <polygon points="220,10 300,210 170,250 123,234" style="fill:lightblue;stroke:pink;stroke-width:1" />
    </svg>
<!-- 五角星 -->
    <svg height="210" width="500">
        <polygon points="100,10 40,198 190,78 10,78 160,198"
            style="fill:yellow;stroke:white;stroke-width:5;fill-rule:nonzero;" />
    </svg>
<!-- 五角星 -->
    <svg height="210" width="500">
        <polygon points="100,10 40,198 190,78 10,78 160,198"
            style="fill:yellow;stroke:yellow;stroke-width:5;fill-rule:evenodd;" />
    </svg>

  效果图：

              

（六）绘制多线段

• <polyline> 元素是用于创建任何只有直线的形状

  示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polyline points="20,20 40,25 60,40 80,120 120,140 30,110" style="fill:none;stroke:blue;stroke-width:3" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
            style="fill:white;stroke:pink;stroke-width:4" />
</svg>

  效果图：

（七）绘制路径

• <path> 元素用于定义一个路径
• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

注意：以上所有命令均允许小写字母  大写表示绝对定位，小写表示相对定位

  示例：

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <path d="M150 0 L75 100 L225 100 Z" stroke="skyblue" stroke-width="3" fill="pink"/>
    </svg>

<!-- 二次方贝塞尔曲线 -->
    <svg height="500" width="500">
        <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
        stroke-width="3" fill="none" />
        <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
        stroke-width="3" fill="none" />
        <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
        fill="none" />
        <path d="M 100 350 q 150 -300 300 0" stroke="blue"
        stroke-width="5" fill="none" />
        <!-- Mark relevant points -->
        <g stroke="black" stroke-width="3" fill="black">
          <circle id="pointA" cx="100" cy="350" r="3" />
          <circle id="pointB" cx="250" cy="50" r="3" />
          <circle id="pointC" cx="400" cy="350" r="3" />
        </g>
        <!-- Label the points -->
        <g font-size="30" font="sans-serif" fill="black" stroke="none"
        text-anchor="middle">
          <text x="100" y="350" dx="-30">A</text>
          <text x="250" y="50" dy="-10">B</text>
          <text x="400" y="350" dx="30">C</text>
        </g>
      </svg>

  效果图：

（八）绘制文本

   示例：

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <text x="10" y="15" fill="blue">普通的文字</text>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <text x="10" y="15" fill="blue" transform="rotate(30 20,40)">旋转的文字</text>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
        </defs>
        <text x="10" y="100" style="fill:blue;">
            <textPath xlink:href="#path1">路径上的文字</textPath>
        </text>
    </svg>

  效果图：

 

（九）SVG Stroke 属性

• stroke 属性定义一条线，文本或元素轮廓颜色
• stroke-width 属性定义了一条线，文本或元素轮廓厚度
• stroke-linecap 属性定义不同类型的开放路径的终结
• stroke-dasharray 属性用于创建虚线

 示例：

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none">
            <path stroke="red" d="M5 20 l215 0" />
            <path stroke="blue" d="M5 40 l215 0" />
            <path stroke="yellow" d="M5 60 l215 0" />
        </g>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="skyblue">
            <path stroke-width="2" d="M5 20 l215 0" />
            <path stroke-width="4" d="M5 40 l215 0" />
            <path stroke-width="6" d="M5 60 l215 0" />
        </g>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="skyblue" stroke-width="6">
            <path stroke-linecap="butt" d="M5 20 l215 0" />
            <path stroke-linecap="round" d="M5 40 l215 0" />
            <path stroke-linecap="square" d="M5 60 l215 0" />
        </g>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="skyblue" stroke-width="4">
            <path stroke-dasharray="5,5" d="M5 20 l215 0" />
            <path stroke-dasharray="10,10" d="M5 40 l215 0" />
            <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
        </g>
    </svg>

  效果图：

（十）SVG 滤镜

SVG滤镜用来增加对SVG图形的特殊效果：

• feBlend - 与图像相结合的滤镜
• feColorMatrix - 用于彩色滤光片转换
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset - 过滤阴影
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight - 用于照明过滤
• fePointLight - 用于照明过滤
• feSpotLight - 用于照明过滤

（十一）SVG 模糊效果

• 所有互联网的SVG滤镜定义在<defs>元素中
• <defs>元素定义短并含有特殊元素（如滤镜）定义
• <filter>标签用来定义SVG滤镜
• <feGaussianBlur> 元素用于创建模糊效果

   示例：

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="f1" x="0" y="0">
                <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
            </filter>
        </defs>
        <rect width="90" height="90" stroke="green" stroke-width="3" fill="skyblue" filter="url(#f1)" />
    </svg>
<!--
<filter>元素id属性定义一个滤镜的唯一名称
<feGaussianBlur>元素定义模糊效果
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量
<rect>元素的滤镜属性用来把元素链接到"f1"滤镜
-->

   效果图：

（十二）SVG 阴影

• <feOffset> 元素用于创建阴影效果
• <feGaussianBlur> 元素可以使图像变的模糊
• <feGaussianBlur> 元素的stdDeviation属性定义了模糊量

   示例：

 <!-- 偏移一个矩形（带<feOffset>），然后混合偏移图像顶部（含<feBlend>） -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="f1" x="0" y="0" width="200%" height="200%">
                <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
                <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
            </filter>
        </defs>
        <rect width="90" height="90" stroke="pink" stroke-width="3" fill="lightblue" filter="url(#f1)" />
    </svg>
<!-- 偏移图像可以变的模糊（含 <feGaussianBlur>） -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="f1" x="0" y="0" width="200%" height="200%">
                <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
                <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
                <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
        </defs>
        <rect width="90" height="90" stroke="pink" stroke-width="3" fill="lightblue" filter="url(#f1)" />
    </svg>

   效果图：

  

（十三）SVG 渐变-线性

SVG渐变主要有两种类型：

• Linear
• Radial

<linearGradient>元素用于定义线性渐变

• <linearGradient>标签的id属性可为渐变定义一个唯一的名称
• <linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置

<linearGradient>标签必须嵌套在<defs>的内部

<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义

线性渐变可以定义为水平，垂直或角渐变：

• 当y1和y2相等，而x1和x2不同时，可创建水平渐变
• 当x1和x2相等，而y1和y2不同时，可创建垂直渐变
• 当x1和x2不同，且y1和y2不同时，可创建角形渐变
• 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。
• 填充属性把 ellipse 元素链接到此渐变

   示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(168, 198, 235);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(240, 169, 229);stop-opacity:1" />
          </linearGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

   效果图：

（十四）SVG 渐变-放射性

<radialGradient>元素用于定义放射性渐变

<radialGradient>标签必须嵌套在<defs>的内部

<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义

• <radialGradient>标签的 id 属性可为渐变定义一个唯一的名称
• CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
• 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束
• 填充属性把ellipse元素链接到此渐变

   示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:rgb(255,255,255);
            stop-opacity:0" />
            <stop offset="100%" style="stop-color:lightblue;stop-opacity:1" />
          </radialGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

   效果图：

 官方手册：SVG 教程 | 菜鸟教程