svg

svg用于绘制矢量图

　　如果绘制的时候不设置大小，默认占用面积为300*150。

定义矩形 rect

定义圆 circle   　　　　 cx、cy 定义圆心坐标 ，r定义半径

定义椭圆 ellipse　　　　cx，cy定义圆心坐标 ，rx定义x轴半径　　ry定义y轴半径

直线 line 　　　　　　x1、x2定义起始点坐标     x2，y2定义结束点坐标    必须结合stroke绘制

多边形  polygon points=" "  写多边形角的坐标

定义折线 polyline points=" "  写折点坐标

定义路径 path d="M"   M是起点坐标L是相邻点坐标  Z让路径构成闭合回路  H代表水平的线条  默认x轴上的值一样  V代表垂直线条

 

svg中fill-opacity 和 opacity属性的区别:fill-opacity填充色透明度 顾名思义  只改变填充的透明度 不包含边框等，而opacity是改变全体的透明度。

svg过渡动画

　　

transform 转换 svg中的一个属性 translate rotate scale

平移 旋转都是以起点0 0 点为参考点 而css3中以元素的中心点为参考点

g用于将相关元素进行组合

g身上的属性 子元素都会继承 但是g上的属性都必须是显现元素 不是svg元素私有的 比如g上的圆心坐标不行

text 用于定义文本 x y 的值在字体的左下角

text-anchor:middle; 让字体居中

image 绘制图片

x 图像左上角x轴坐标

y 图像左上角y轴的坐标

width 图像的宽度

height： 图像的高度

xlink-href 图像的路径   *必须

use用于复制元素 x y

x y是相对于原始的元素的坐标位置 不是先对svg的00点坐标

animate

写在需要动画元素的中间

attrbuteName form to dur repeatCount="indefinite"(无限次)