定义

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 使用 XML 格式定义图像。在浏览器中展示的SVG需要浏览器解释执行，IE8不支持SVG。

实例：

 
My first SVG
 

  

 

SVG 代码写在SVG标签中 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

svg预定义元素：

矩形

圆形

椭圆

线

折线

多边形

路径

文字

 

分组

g 标记就是’group’的简写，是用来分组用的，它能把多个元素放在一组里，对 g 标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承 g 标记上的所有属性。用定义的分组还可以使用 use 进行复制使用。

 
   
   
 

clipPath-裁剪

能限制哪些地方可见，哪些地方不可见。标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来)。剪切路径是用clipPath元素定义的，属性clip-path可用来引用剪切路径。默认情况下，一个形状，其被剪切掉的区域（不可见的区域）是不响应鼠标事件的。

// 超出矩形区域将不会被绘制

 
   
     
     
   
 

 

use-深度复用

use 标记的作用是能从 SVG 文档内部取出一个节点，克隆它，并把它输出到别处。跟’引用’很相似，但它是深度克隆。

 
    .classA { fill:red }
 
 
   
     
   
 

 
 
 

defs-模板

defs 元素用于预定义一个元素使其能够在 SVG 图像中重复使用，和 g 结合使用。

 
   
       
       
       
   
 

 
 
   

symbol-模板

symbol 标记的作用是定义一个图像模板，它的作用相当于 g 和 defs 的结合，你可以使用 use 标记实例化它，然后在 SVG 文档中反复使用，这种用法非常的高效。symbol 本身不会输出任何图像，只有使用 use 实例化后才会显示。。

 
   
   
 

 
 
 

text 元素用于定义文本

 
  hello world !
  hello world !
 
  hello world !
 
  这里有几行文字：
    这是第一行文字。
    第二行文字在这里。
 
 
 
    超链接 !
 
 
 
   
 
 
    I love SVG I love SVG
 
 
  hello world !
 
  hello world !
 
  hello world !
  hello world !

元素属性：

height 高
width 宽
style 定义css属性
fill 填充色
fill-opacity 填充透明度
fill-rule 图形填充规则 https://blog.csdn.net/zsy_snake/article/details/80960763
stroke-width 边框宽
stroke 边框颜色
stroke-opacity 边框颜色透明度
cx、cy 圆心坐标
r 半径
rx、ry 水平、垂直半径（椭圆）
x1、y1 直线起点坐标
x2、y2 直线终点坐标
points 多点坐标
d 中坐标 https://blog.csdn.net/zSY_snake/article/details/80962896