阅读数:211 评论数:0

svg 是Scalable Vector Graphics意为可缩放矢量图形，SVG使用XML格式定义二维图形和绘图程序的语言。

一、使用方式

1、SVG文件可以插入网页中成为dom的一部分，然后用javascript和css进行操作。

 <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg> 

第一行包含了XML声明，standalone属性规定此svg文件是否是“独立的”，或含有对外部文件的引用。在这里，引用了个部的DTD文件。

第二行和第三行引用了外部的SVG DTD，该DTD位于W3C，含有所有允许的SVG元素。

SVG代码以<svg>元素开始，包括开启标签<svg>和关闭标签</svg>。这是根元互， width和height属性可设置此svg文档的宽度和高度。version属性可定义所用的svg版本，xmlns属性可定义svg命名空间。

2、svg代码写在一个独立文件中，用<img> <object><embed><iframe>等标签 插入网页。

（1） 使用<embed>标签

<embed src="circle1.svg" type="image/svg+xml"/>

所有主要浏览器都支持，并允许使用脚本。

（2） 使用<object>标签

<object data="circle1.svg" type="image/svg+xml"></object>

所有主要浏览器都支持，不允许使用脚本。

（3） 使用<iframe>

<iframe src="circle1.svg"></iframe>

所有浏览器都支持，并允许使用脚本。

（4)在Firefox chrome中，还可以直接在HTML中写入svg代码。

3、css可使用svg文件

.logo {
  background: url(icon.svg);
}

4、svg文件可转为base64编码，作为Data URL写入网页

<img src="data:image/svg+xml;base64,[data]">

二、坐标轴系统

以页面的左上角为(0,0)坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。
在HTML文档中，元素都是用这种方式定位的。

三、颜色

RGB: 红色、绿色、蓝色，每个分量的取值范围[0, 255]，优点是显示器更容易解析。
HSL: 颜色h、饱和度s%、亮度l%，每个分量的取值范围分别是[0, 359], [0, 100%], [0, 100%],，其中，h=0表示红色， h=120表示绿色，h=240表示 蓝色。

四、作用于svg标签的属性

1、viewport

表示svg的可见区域的大小。

（1）width  控制svg的宽度

（2）heigth 控制svg的高度

2、viewBox

3、preserveAspectRatio

作用对象是viewBox，属性值为空格分隔的两个值组合而成。

（1）第一个值

表示viewBox如何与viewPort对齐。它又分为两个部分，前半部分表示x方向的对齐，后半部分表示y方向对齐。

如xMaxYMax表示右下

（2）第二个值

表示如何维持高宽比（可为空）。

五、作用于svg内部元素的属性

1、svg支持css选择器给元素添加样式

/* 定义样式 */
.rectStyle {
  fill: yellow;
}
<svg width="200" height="200">
  <rect class="rectStyle" width="20" height="20"></rect>
</svg>

2、直接在元素上设置样式

<svg width="200" height="200">
  <rect width="20" height="20" fill="yellow"></rect>
</svg>

3、写成style

<svg width="200" height="200">
  <rect style="fill: yellow;" width="20" height="20"></rect>
</svg>

4、填充

fill：定义填充颜色和文字颜色；
fill-opacity：定义填充颜色的透明度；
fill-rule：指定填充规则，符合填充规则才可被填充；
    有效值: nonzero | evenodd | inherit
    默认值: nonzero
    应用于: shape 形状类元素 和 文字内容类元素
    可继承:  是
    比例:   无
    媒体:   可见
    动画可用:  是

（1）nonzero

按照规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。

（2）evenodd

按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。

5、边框

stroke：边框颜色；
stroke-width：边框宽度；
stroke-opacity：边框透明，取值[0,1]；
stroke-linecap：单条线端点样式，一般应用于直线或者路径，取值：[ butt | square | round ]，分别是对接、方形和圆形
stroke-dasharray：虚线边框，可以设置每段虚线的长度和间隔，之间使用逗号分隔或者空格分隔，
如：stroke-dasharray="10, 5, 5, 10"
stroke-dashoffset：设置虚线描边偏移量，使图案向前移动
sroke-linejoin：两条线段之间衔接点的样式，取值：[ miter（尖角） | round（圆角） | bevel（斜角） ]

6、透明度

opacity：定义整个图形的透明度

7、字体

font-size：字体大小；
font-family：字体系列的名称；
font-weight：字体粗细；
font-style：字体样式，斜体和正常；
text-decoration：下划线样式；
text-anchor：设置文本的排列属性，属性值 [start | middle | end | inherit]；
	如：middle表示，将文字定位原点移动至文字中心。

8、变换

transform：同 css，默认是左上角为旋转中心，如：transform="rotate(30)"；
transform-origin：同css，设置旋转的操作中心；
rotate：设置文字元素的旋转角度，正值为顺时针旋转，

注意区分 rotate 和 transform 中的 rotate，如 rotate=“30”，而 transform 中的 rotate 是对整个元素进行旋转操作。

<svg width="200" height="200">
   <text x="10" y="10" dx="10" dy="10" textLength="100" rotate="20"> 示例文字1 </text>
</svg>
<svg width="200" height="200">
   <text x="10" y="10" dx="10" dy="10" textLength="100" transform="rotate(20)"> 示例文字2 </text>
</svg>

SVG形状

1、<rect>

<svg width="200" height="200">
  <rect x="10" y="10" width="100" height="100" rx="5" ry="5" fill="yellow"></rect>
</svg>

rect元素的width和height属性可定义矩形的高度和宽度，style属性用来定义css属性，css的fill属性定义矩形的填充颜色，stroke-width属性定义矩形边框的宽度，stroke属性定义矩形边框的颜色。

2、<circle>

<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="yellow"></circle>
</svg>

创建一个圆，cx和cy属性定义圆点的x和y坐标，如果省略cx和cy，圆的中心点为（0，0），r属性定义圆的半径。

3、<ellipse>

<svg width="200" height="200">
  <ellipse cx="50" cy="50" rx="40" ry="20" fill="yellow"></ellipse>
</svg>

椭圆和圆相似，不同之处在于椭圆有不同的x和y半径。

cx,cy定义椭圆中心，rx定义水平半径，ry定义垂直半径。

4、<line>

<svg width="200" height="200">
  <line x1="10" y1="10" x2="90" y2="90" stroke="yellow"></line>
</svg>

用来创建一个直线，x1 y1定义线条的开始，x2 y2定义线条的结束。

5、<polygon>

/* 图一 折线，不会将起点与终点连接 */
<svg width="200" height="200">
  <polyline 
  	points="50,10 80,90 10,30 90,30 20,90" 
  	stroke="#fb3" 
  	stroke-width="3" 
  	fill="transparent">
  </polyline>
</svg>
 
/* 图二 多边形，将起点与终点连接 */
<svg width="200" height="200">
  <polygon 
  	points="50,10 80,90 10,30 90,30 20,90" 
  	stroke="#fb3" 
  	stroke-width="3" 
  	fill="transparent">
  </polygon>
</svg>

多边形，points属性定义多边形每个角的x和y坐标。

6、<polyline>

创建任何只有直线的形状。

points属性定义每个直线的起始和结束 。

7、<path>

定义一个路径，使用d属性控制路径的类型和绘制。路径的功能最多，前面的所有图形都可以使用路径进行绘制。

d 属性值的书写有两种:使用逗号分隔坐标，如：d=“M10, 10”，也可以使用空格的形式，如：d="M 10 10"
注意: 大写字母：表示坐标系中使用绝对坐标，小写字母：使用相对坐标（相对当前画笔所在的点)；

(1) M=moveto

<svg width="200" height="200">
    <path d="M 10 10 L 180 180" stroke="#fb3" stroke-width="4" fill="transparent"></path>
</svg>

(2) L=lineto

(3)H=horizontal lineto

(4) V=vertical lineto

(5) C=curveto

绘制三次方贝塞尔曲线到终点坐标，中间经过两个控制点控制曲线的弧度，所以需要制定三个坐标来实现绘制曲线；

(6) S=smooth curveto

绘制平滑三次方贝塞尔曲线到终点坐标，与上一条三次方贝塞尔曲线相连，第一个控制点为上一条曲线第二个控制点的对称点，所以还需制定一个控制点坐标和终点坐标。
eg：d=“M10,10 C40,5 40,140 100,100 S140,180 160,160”，如果不与贝塞尔曲线相连，即：d=“M10,10 S140,180 160,160”，则绘制的图线接近于二次贝塞尔曲线。

(7) Q=quadratic Bezier curve

绘制二次贝塞尔曲线到终点坐标，中间经过一个控制点控制曲线的弧度。

(8) T=smooth quadratic Bezier curve

(9) A=elliptical Arc

绘制椭圆曲线到指定坐标，
参数说明：
rx，ry：x轴方向半径，y轴方向半径；
x-axis-rotation：x轴与水平顺时针方向夹角；
large-arc-flag：角度弧线大小(1：大，0：小)；
sweep-flag：绘制方向(1：顺时针，0：逆时针)；
x y：终点坐标；

(10) Z=closepath

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

绘制直线将终点与起点连接；

8、文本

（1）<text>

定义一个文本。

x：文字的x坐标；
y：文字的y坐标；
dx：相对于当前位置x方向的距离；
dy：相对于当前位置的y方向的距离；
textLength：文字的显示长度；rotate：旋转角度，也可以使用transform=“rotate(30)”；

（2）<textPath>

如果要实现文字沿着路径进行排列，可使用 < textPath >< /textPath > 标签来实现。需要提前定义好路径 path，并指定 id，textPath 使用 xlink:href 定义文字要匹配的路径。

<svg width="600" height="600">
    <path 
    	id = "textPath1" 
    	d = "M100,100 C140,50 140,240 200,200 S240,280 360,360" 
    	stroke = "#fb3" 
    	stroke-width = "4px" 
    	fill = "transparent">
    </path>
    <text x="10" y="10" dx="-10" dy="-10" rotate="20">
        <textPath xlink:href="#textPath1" textLength="300">
            很扭曲的测试示例文字
        </textPath>
    </text>
</svg>

9、特殊元素

（1）克隆元素use

use 标签用来克隆其他元素，克隆后的元素不能修改样式

<svg>
  <rect 
  	id="rect1"
    x="10" y="10" width="100" height="100"
    stroke="#5588aa" stroke-width="5"
    fill="transparent"
  ></rect>
  <use x="20" y="20" xlink:href="#rect1"></use>
</svg>

x：相对被克隆元素 x 轴偏移量；
y：相对被克隆元素 y 轴偏移量；
xlink:href：指向被克隆元素的 ID；

（2）模板元素symbol

symbol标签用定义模版，需要结合use标签使用，模版在未被使用之前，不会展示在页面上，模版内部可包含多个元素。

<svg>
  <symbol id="template1">
    <rect 
    	x="10" y="10" width="100" height="100"
        stroke="#5588aa" stroke-width="5"
        fill="transparent"
    ></rect>
    <circle cx="60" cy="60" r="30" stroke="#5588aa" stroke-width="3" fill="transparent"></circle>
  </symbol>
  <use x="20" y="20" xlink:href="#template1"></use>
</svg>

（3）defs

defs标签用于自定义形状，它内部的代码不会显示，仅供引用。

<svg width="300" height="100">
  <defs>
    <g id="myCircle">
      <text x="25" y="20">圆形</text>
      <circle cx="50" cy="50" r="20"/>
    </g>
  </defs>
  <use href="#myCircle" x="0" y="0" />
  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>

（4）pattern

pattern标签用于自定义一个形状，该形状可以被引用来平铺一个区域。

<svg width="500" height="500">
  <defs>
    <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <circle fill="#bee9e8" cx="50" cy="50" r="35" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>

（5）组元素g

group的简写，用来创建分组，组内所有的元素都会继承 g 的属性，可以嵌套使用，也可以和use标签结合使用。
另外可使用 transform 属性定义控制整个组的位置。

<svg width="500" height="500">
  <g stroke="red" stroke-width="3" fill="transparent">
    <rect x="10" y="10" width="100" height="100"></rect>
    <rect x="120" y="120" width="100" height="100"></rect>
  </g>
</svg>

（6）裁剪元素clipPath

主要用来剪裁元素，clipPath 元素定义范围外的内容将不会被展示。

<svg height="200" width="200">
    <defs>
      <clipPath id="clip">
        <rect width="100" height="100"></rect>
      </clipPath>
    </defs>
    <circle cx="90" cy="90" r="90" clip-path="url(#clip)" stroke="none" fill="yellow" />
</svg>

（7）定义图像<image>

< image >的 xlink:href 属性表示图像的来源。

10、动画

（1）animate

用于产生动画效果

<svg width="500px" height="500px">
  <rect x="0" y="0" width="100" height="100" fill="#feac5e">
    <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
    <animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>

attributeName：发生动画效果的属性名。
from：单次动画的初始值。
to：单次动画的结束值。
dur：单次动画的持续时间。
repeatCount：动画的循环模式。

（2）animateTransform

< animate >标签对 CSS 的 transform 属性不起作用，如果需要变形，就要使用 < animateTransform > 标签。

<svg width="500px" height="500px">
  <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
    <animateTransform 
	    attributeName="transform" 
	    type="rotate" begin="0s" dur="10s" 
	    from="0 200 200" to="360 400 400" 
	    repeatCount="indefinite" />
  </rect>
</svg>