svg详解

定义

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