1、坐标定位
关于一切元素，SVG 运用的坐标体系或许说网格体系，和 Canvas 用的差不多（一切计算机绘图都差不多）。这种坐标体系是：以页面的左上角为 (0,0) 坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。
<svg width="200" height="200" viewBox="0 0 100 100">…</svg>
-
界说的画布尺度是 200*200px
-
viewBox 代表画布上能够显现的区域：从 (0,0) 点开端，100 宽 100 高的区域。这个 100、100 的区域，会放到 200*200 的画布上显现。于是就形成了扩大两倍的作用。
假如设置成
100 100 100 100代表做左上角初始点为 100-100，并且让100*100显现到200*200的画布上，默认就扩大两倍
2、基本形状
2.1 rect 矩形
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
rx、ry 表明圆角的半径，默认为 0
2.2 circle 圆形
<circle cx="25" cy="75" r="20"/>
cx、cy 代表圆心的 x、y 方位，r 代表半径
2.3 Line 线条
<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>
x1、y1 代表起点 x、y 的方位；x2、y2 代表结尾 x、y 的方位；stroke 和 stroke-width 别离代表边框颜色和宽度
2.4 Polyline 折线
<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/>
points：点集数列。每个数字用空白、逗号、终止指令符或许换行符分离隔。每个点有必要包括 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 能够写成这样：“0 0, 1 1, 2 2”。
2.5 polygon 多边形
<polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>
points：点集数列。每个数字用空白符、逗号、终止指令或许换行符分离隔。每个点有必要包括 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 能够写成这样：“0 0, 1 1, 2 2”。途径制造完后闭合图形，所以最终的直线将从方位 (2,2) 衔接到方位 (0,0)。
2.6 path 途径
你能够用 path 元素制造矩形（直角矩形或许圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2 次曲线等曲线。因为 path 很强大也很杂乱，请阅读 Paths 章节以了解更多信息
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
d：一个点集数列以及其他关于怎么制造途径的信息
3、填充和边框
能够运用几种办法来着色（包括指定目标的特点）运用内联 CSS 款式、内嵌 CSS 款式，或许运用外部 CSS 款式文件。大多数的 web 网站的 SVG 运用的是内联款式 CSS，关于这些办法都有优缺点。
3.1 Fill 和 Stroke 特点
<rect x="10" y="10" width="100" height="100"
stroke="blue" stroke-width="20" stroke-linecap="butt" stroke-opacity="0.8"
fill="purple" fill-opacity="0.5" />
-
fill：设置目标内部的颜色
-
stroke：设置制造目标的线条的颜色
-
stroke-width：界说了描边的宽度
-
stroke-linecap：控制边框结尾的形状
-
butt用直边完毕线段，它是常规做法，线段鸿沟 90 度笔直于描边的方向、贯穿它的结尾。 -
square的作用差不多，可是会略微超出实际途径的规模，超出的大小由stroke-width控制。 -
round表明边框的结尾是圆角，圆角的半径也是由stroke-width控制的。
<?xml version="1.0" standalone="no"?> <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> </svg> -
-
xxx-opacity：控制透明度
-
stroke-linejoin：用来控制两条描边线段之间，用什么方式衔接
<?xml version="1.0" standalone="no"?> <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> </svg>
-
stroke-dasharray：将虚线类型应用在描边上
<?xml version="1.0" standalone="no"?> <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> <path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> </svg>
stroke-dasharray特点的参数，是一组用逗号切割的数字组成的数列。留意，和path不一样，这里的数字有必要用逗号切割（空格会被忽略）。每一组数字，第一个用来表明填色区域的长度，第二个用来表明非填色区域的长度。所以在上面的例子里，第二个途径会先做 5 个像素单位的填色，紧接着是 5 个空白单位，然后又是 5 个单位的填色。假如你想要更杂乱的虚线形式，你能够界说更多的数字。第一个例子指定了 3 个数字，这种情况下，数字会循环两次，形成一个偶数的虚线形式（奇数个循环两次变偶数个）。所以该途径首要烘托 5 个填色单位，10 个空白单位，5 个填色单位，然后回头以这 3 个数字做一次循环，可是这次是创立 5 个空白单位，10 个填色单位，5 个空白单位。通过这两次循环得到偶数形式，并将这个偶数形式不断重复。
其他还有一些关于填充和边框的特点，包括 fill-rule，用于界说怎么给图形堆叠的区域上色；stroke-miterlimit，界说什么情况下制造或不制造边框衔接的 miter 作用；还有 stroke-dashoffset，界说虚线开端的方位。
3.2 运用 CSS
-
CSS 能够利用 style 特点刺进到元素的行间：
<rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> -
或许，它能够被移到你所包括的一个特殊的款式部分。不过，我们不会像 HTML 那样把这样的部分塞进
<head>部分，而是把它包括在一个叫做defs的区域。defs表明界说，这里面能够界说一些不会在 SVG 图形中出现、可是能够被其他元素运用的元素：<?xml version="1.0" standalone="no"?> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <style><![CDATA[ #MyRect { stroke: black; fill: red; } ]]></style> </defs> <rect x="10" height="180" y="10" width="180" id="MyRect"/> </svg>一些能够在 HTML 里运用的 CSS，在 svg 里可能无法正常作业，比方
before和after伪类 -
你也能够界说一个外部的款式表引入运用：
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect height="10" width="10" id="MyRect"/> </svg>/* css */ #MyRect { fill: red; stroke: black; }
4、突变
4.1 线性突变
线性突变沿着直线改变颜色，要刺进一个线性突变，你需求在 SVG 文件的 defs 元素 内部，创立一个linearGradient 节点：
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="black" stop-opacity="0"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
<style type="text/css">
#rect1 { fill: url(#Gradient1); }
.stop1 { stop-color: red; }
.stop2 { stop-color: black; stop-opacity: 0; }
.stop3 { stop-color: blue; }
</style>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
</svg>
你也能够指定特点 stop-opacity 来设置某个方位的半透明度（同样，关于 FF3 你也能够设置 rgba 值）：
<stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
x1、x2、y1 和 y2，这些特点界说了突变路线走向：
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
4.2 径向突变
径向突变与线性突变类似，仅仅它是从一个点开端发散制造突变。创立径向突变需求在文档的defs中增加一个 radialGradient 元素：
<?xml version="1.0" standalone="no"?>
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="RadialGradient1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
</svg>
5、文本
5.1 根底运用
<text x="10" y="10">Hello World!</text>
下列每个特点能够被设置为一个 SVG 特点或许成为一个 CSS 声明：font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing 和 text-decoration。
5.2 tspan 元素
该元素用来标记大块文本的子部分，它有必要是一个 text 元素或其他 tspan 元素的子元素。一个典型的用法是把句子中的一个词变成粗体红色：
<text>
<tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>
tspan 元素有以下的自界说特点：
-
x：为容器设置一个新绝对
x坐标。它覆盖了默认的当时的文本方位。这个特点能够包括一个数列，它们将一个一个地应用到tspan元素内的每一个字符上。 - dx：从当时方位，用一个水平偏移开端制造文本。这里，你能够供给一个值数列，能够应用到连续的字体，因此每次累积一个偏移。此外还有特点 y 和特点 dy 作笔直转换。
- rotate：把一切的字符旋转一个视点。假如是一个数列，则使每个字符旋转别离旋转到那个值，剩下的字符依据最终一个值旋转。
- textLength：这是一个很模糊的特点，给出字符串的计算长度。它意味着假如它自己的度量文字和长度不满足这个供给的值，则答应烘托引擎精密调整字型的方位。
5.3 textPath 元素
<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" />
<text>
<textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
This text follows a curve.
</textPath>
</text>
该元素利用它的 xlink:href 特点取得一个任意途径，把字符对齐到途径，于是字领会盘绕途径、顺着途径走：
6、image 元素
SVG 的 image 元素答应在一个 SVG 目标内部出现光栅图画：
<?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 width="5cm" height="4cm" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image href="firefox.jpg" x="0" y="0" height="50px" width="50px" preserveAspectRatio="none meet"/>
</svg>
- 假如你没有设置 x 特点或 y 特点，它们自动被设置为 0。
- 假如你没有设置 height 特点或 width 特点，它们自动被设置为 0。
- 假如 width 特点或 height 等于 0，将不会出现这个图画。
- 留意：图片宽高比默认锁定，假如需求修改，需求增加 preserveAspectRatio 特点进行设置
preserveAspectRatio：表明是否强制进行一致缩放，能够设置两个参数的列表
-
align：特点值表明是否强制一致缩放，当 SVG 的 viewbox 特点与视图特点宽高比不一致时运用，可选特点检查官方文档
-
none ：不会进行强制一致缩放，假如需求，会缩放指定元素的图形内容，使元素的鸿沟彻底匹配视图矩形。
（留意：假如
<align>的值是none，则<meetOrSlice>特点的值将会被忽略。） -
xMinYMin、xMidYMin、xMaxYMin 、xMinYMid 、xMidYMid 、xMaxYMid 、xMinYMax 、xMidYMax 、xMaxYMax
-
-
meetOrSlice
- meet (默认值) ：假如图形的宽高比和视图窗口不匹配，则某些视图将会超出 viewbox 规模（即 SVG 的 viewbox 视图将会比可视窗口小）
- slice：假如 SVG 的 viewbox 宽高比与可视区域不匹配，则 viewbox 的某些区域将会延伸到视图窗口外部（即 SVG 的 viewbox 将会比可视窗口大）
7、其余标签
7.1 g 元素
便利控制整组的元素进行款式设置或许动画设置，相当于一个容器：
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
<g opacity="0">
文字代码（略）
</g>
<g style="transform: translate(140px, 580px);">
爆仗矢量代码（略）
</g>
<g style="transform: translate(120px, 560px);opacity: 0;">
希望牌矢量代码（略）
</g>
</svg>
7.2 svg
在 svg 标签中是答应嵌入 svg 标签的，便利做屡次动画打开：
留意：当 svg 嵌套 svg 时，内置的 svg 设置宽高或许背景图无法生效，宽高由内置内容决定
<svg width="300" height="180" x="0" y="1806">
<g>
<g>
<image href="./imgs/二次滚动长图.jpg" x="0" y="1029" width="300" preserveAspectRatio="none meet">
<animate attributeName="y" from="1029" to="-100%" begin="0s" dur="200s"
repeatCount="indefinite" />
</image>
<image href="./imgs/动效粒子.gif" x="0" y="1029" width="300" preserveAspectRatio="none meet" />
</g>
<image href="./imgs/二次打开1图.png" x="0" y="180" width="300" preserveAspectRatio="none meet" />
<image href="./imgs/二次打开标题.gif" x="0" y="931" width="300" preserveAspectRatio="none meet" />
<image href="./imgs/结尾图片.png" x="0" y="1329" width="300" preserveAspectRatio="none meet" />
</g>
<!-- 点击触发动画 -->
<animate attributeName="height" from="180" to="1653" dur="3s" begin="click" repeatCount="1" fill="freeze"
restart="never" />
<rect x="0" y="0" width="300" height="180" fill="#fff" />
<image href="./imgs/向下滑动.png" x="0" y="0" width="300" preserveAspectRatio="none meet" />
</svg>
共四章，有需求可催更，网上制造 svg 动画的资源比较少，本章参阅：官方文档入门
