创建svg 文件
1 <svg> 2 xmlns=‘http://www.w3.org/2000/svg‘ #标头 必须
# SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显
# viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度 此处的值与 path 路径的值相关连
3 viewBox=‘0 0 64 64‘
version="1.1" #版本号
4 width=‘64‘ height=‘64‘ #svg 大小尺寸 如果想图像形状不变，只改变大小 修改 width height
5 fill=‘currentcolor‘> #填充颜色
6 <path d=‘M8 26 L32 50 L56 26 L34 6 L32 4 Z‘ /> #path 路径 这个地方可以放 svg 的子标签
7 </svg>
形状
标签内的值可以是百分比，也可以直接是数值
- 矩形 <rect>
- 必选： width height # 宽高
- 可选： x y stroke style fill rx ry
- x ,y 画布的起始 x y 位置 （例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
- rect 元素的 width 和 height 属性可定义矩形的高度和宽度
- style 属性用来定义 CSS 属性
- CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
- CSS 的 stroke 属性定义矩形边框的
- rx ,ry 图像圆角
- 圆形 <circle>
- 必选：r #属性定义圆的半径
- 可选：cx cy
- cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
- 椭圆 <ellipse>
- 必选：rx ry #椭圆中心的x y 坐标
- 可选：cx cy
- CX属性定义的椭圆中心的x坐标； 如果省略cx和cy，圆的中心会被设置为(0, 0)
- CY属性定义的椭圆中心的y坐标
- 线 <line>
- 必选：x2 y2 可选：x1 y1 ( 默认 起始位置 x1=0 y1=0)
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
- 多边形 <polygon>
- 必选：polygon 至少 2组点
- points 点的坐标 每两个算是一组 组与组之间可以使用逗号做间隔
- 折现的交换点在线段末尾的中心点(将绘制的线段放大可以观察到)并且在闭合路径(将结束点设置为起始点 )的时候会出现问题
- 多边形具有自动闭合的左右,可以实现完美闭合并且不用将结束点设置为起始点
- SVG的图形填充规则通过fill-rule属性来指定 （提供两种选项用于指定如何判断图形的"内部"）
- 有效值：nonzero | evenodd | inherit 默认：nonzero
http://www.runoob.com/svg/svg-polygon.html
- 有效值：nonzero | evenodd | inherit 默认：nonzero
- 必选：polygon 至少 2组点
- 折线 <polyline> (曲线) 元素是用于创建任何只有直线的形状
- 必选： 至少2组点
- 路径 <path>
文本
- 文本<text>
- 必选： x y fill
- x 起始位置
- y 起始位置
- fill 填充颜色
- 必选： x y fill
- 文本路径<textPath>作用就是放在<text>标记内部引用预定义的
<path>，引用时，我们需要使用xlink:href属性指明需要引用的路径的ID。在SVG里，处理能沿直线方向写文字外，还能够使用<path>先定义一条路径，让文字沿着定义好的路径排列 -
1 <svg width="100%" height="100%" viewBox="0 0 1000 300" 2 xmlns="http://www.w3.org/2000/svg" 3 xmlns:xlink="http://www.w3.org/1999/xlink"> 4 <defs> 5 <path id="MyPath" 6 d="M 100 200 7 C 200 100 300 0 400 100 8 C 500 200 600 300 700 200 9 C 800 100 900 100 900 100" /> 10 </defs> 11 12 <use xlink:href="#MyPath" fill="none" stroke="red" /> 13 14 <text font-family="Verdana" font-size="42.5"> 15 <textPath xlink:href="#MyPath"> 16 我先往上去，然后往下去，然后再往上去，漂亮吧！ 17 </textPath> 18 </text> 19 20 <!-- Show outline of the viewport using ‘rect‘ element --> 21 <rect x="1" y="1" width="998" height="298" 22 fill="none" stroke="black" stroke-width="2" /> 23 </svg>
- <tspan>标记的作用是将一段文本包裹起来，你可以对这段包裹的文字的颜色、位置、形状等特征进行单独的修饰，它跟html标记<span>的作用非常相似
-
1 <style> 2 text{font: 20px Verdana, Helvetica, Arial, sans-serif;} 3 tspan{ fill: red; font-weight: bold} 4 </style> 5 <svg width="250" height="100" viewBox="0 0 250 100" xmlns="http://www.w3.org/2000/svg" version="1.1"> 6 <text x="15" y="30">你丫的 7 <tspan>不是</tspan> 8 一个香蕉 9 </text> 10 </svg>
stroke 属性
-
- stroke 颜色
- stroke-width 宽度
- stroke-linecap 不同类型的开放路径的终结
- butt 直角原状态
- round 圆角
- square 加长方角（点的重合）
- stroke-dasharray 用于创建虚线
- 一个参数时： 表示一段虚线长度和每段虚线之间的间距 / 定义描边的虚线长度，如果提供奇数个，则会自动复制该值成偶数
- 两个参数或者多个参数时：一个表示长度，一个表示间距/第一个为虚线的宽度 第二个是虚线之间的间距
- stroke-dashoffset 定义虚线描边的偏移量
滤镜 fe 后缀可用于所有的滤镜
- <feGaussianBlur> 元素是用于创建模糊效果
-
<defs>元素定义短并含有特殊元素（如滤镜）定义
-
<filter>标签用来定义SVG滤镜
- <filter>元素id属性定义一个滤镜的唯一名称
- <feGaussianBlur>元素定义模糊效果
- in="SourceGraphic"这个部分定义了由整个图像创建效果
- stdDeviation属性定义模糊量
- <rect>元素的滤镜属性用来把元素链接到"f1"滤镜 filter="url(#f1)"
-
- <feOffset>元素是用于创建阴影效果
-
- <filter>元素id属性定义一个滤镜的唯一名称
- 例子：
1 <defs> 2 <filter id="f1" x="0" y="0" width="200%" height="200%"> 3 <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" /> 4 <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> 5 <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> 6 </filter> 7 </defs> 8 <rect width="90" height="90" stroke="green" stroke-width="3" 9 fill="yellow" filter="url(#f1)" />
<feOffset>元素的属性改为"SourceAlpha"在Alpha通道使用残影，而不是整个RGBA像素
-
- <linearGradient>元素用于定义线性渐变
-
<linearGradient>标签必须嵌套在<defs>的内部。
-
<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
-
线性渐变可以定义为水平，垂直或角渐变：
- 当y1和y2相等，而x1和x2不同时，可创建水平渐变
- 当x1和x2相等，而y1和y2不同时，可创建垂直渐变
- 当x1和x2不同，且y1和y2不同时，可创建角形渐变
- <linearGradient>标签的id属性可为渐变定义一个唯一的名称
- <linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置
- 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。
- 填充属性把 ellipse 元素链接到此渐变
- 例子：
-
1 <defs> 2 <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> 3 <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 4 <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 5 </linearGradient> 6 </defs> 7 <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
-
- <radialGradient>元素用于定义放射性渐变
- <radialGradient>标签的 id 属性可为渐变定义一个唯一的名称
- CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
- 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束
- 填充属性把ellipse元素链接到此渐变
- 例子：
-
1 <defs> 2 <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%"> 3 <stop offset="0%" style="stop-color:rgb(255,255,255); 4 stop-opacity:0" /> 5 <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /> 6 </radialGradient> 7 </defs> 8 <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
结构元素
- <use>标记的作用是能从SVG文档内部取出一个节点，克隆它，并把它输出到别处，例子：
-
1 <svg width="100%" height="300" xmlns="http://www.w3.org/2000/svg" viewBox=‘0 0 50 100‘> 2 <style> 3 .classA { fill:red } 4 </style> 5 <defs> 6 <g id="Port"> 7 <circle style="fill:inherit" r="10"/> 8 </g> 9 </defs> 10 <text y="15">black</text> 11 <use x="50" y="10" xlink:href="#Port" /> 12 <text y="35">red</text> 13 <use x="50" y="30" xlink:href="#Port" class="classA"/> 14 <text y="55">blue</text> 15 <use x="50" y="50" xlink:href="#Port" style="fill:blue"/> 16 </svg>
- <symbol>标记的作用是定义一个图像模板，你可以使用<use>标记实例化它，然后在SVG文档中反复使用，这种用法非常的高效。<symbol>本身不会输出任何图像，只有使用<use>实例化后才会显示。
-
1 <svg viewBox="0 0 150 150" height=‘300‘ xmlns="http://www.w3.org/2000/svg" > 2 3 <symbol id="sym01" viewBox="0 0 150 110"> 4 <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/> 5 <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/> 6 </symbol> 7 <use xlink:href="#sym01" 8 x="0" y="0" width="100" height="50"/> 9 <use xlink:href="#sym01" 10 x="0" y="50" width="75" height="38"/> 11 <use xlink:href="#sym01" 12 x="0" y="100" width="50" height="25"/> 13 </svg>
- <g>标记就是‘group’的简写，是用来分组用的，它能把多个元素放在一组里，对<g>标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承<g>标记上的所有属性。用<g>定义的分组还可以使用<use>进行复制使用。
-
1 <svg viewBox="0 0 95 50" xmlns="http://www.w3.org/2000/svg"> 3 <g stroke="green" fill="white" stroke-width="5"> 4 <circle cx="25" cy="25" r="15"/> 5 <circle cx="40" cy="25" r="15"/> 6 <circle cx="55" cy="25" r="15"/> 7 <circle cx="70" cy="25" r="15"/> 8 </g> 9 </svg>
参考手册：http://know.webhek.com/svg/svg-home.html http://www.runoob.com/svg/svg-tutorial.html