SVG

svg  矢量图

　　svg绘制矢量图；canvas用于绘制位图

　　svg使用xml格式绘制图形

　　svg要有一个根节点，叫svg标签，就相当于html

　　

　　svg如果不设置大小，默认占用面积300*150

定义矩形

　　rect标签 属性：width，height，x，y，rx，ry，fill，stroke-width，stroke，style

　　style="fill-opacity:0.2;stroke-opacity:0.5;opacity:0.5"

　　fill-opacity和opacity的区别：fill-opacity只改变填充色的透明度；opacity改变fill和stroke的透　明度都改变

定义圆

　　circle：cx cy 定义圆的圆心坐标  r定义半径

定义椭圆

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

定义直线

　　line：x1 y1 定义起始坐标 x2 y2 定义结束坐标  必须结合stroke绘制

定义多边形

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

定义折线

　　polyline points=" " 折点的坐标

定义路径

　　path  d="M"

　　M 是起点坐标  L 是相邻点坐标 Z 让路劲构成闭合回路

　　H 代表水平的线条 默认y轴上的值一样

　　V 代表垂直的线条 默认x轴上的值一样

　　A 后面有七个值：X半径，Y半径，角度，弧长（0 小弧；1 大弧），方向（0 逆时针；1 顺时针），终点X坐标，终点Y坐标

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

　　　　　平移，旋转都是以起点（0，0）（svg的左上角）点为参考点，而css3中以元素的中心点为参考点

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

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

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

　　

　　text-anchor="middle" 让字体居中

lmage 绘制图片

　　x="图像的左上角的x轴坐标"

　　y="图像的左上角的y轴坐标"

　　width="图像的宽度"（必须）

　　height="图像的高度"（必须）

　　xlink:href="图像的路径"（必须）

use 用于复制元素 x y

　　xy是相对原始的元素的坐标位置，不是相对的svg的0，0点坐标

animate：写在需要动画元素的中间

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

　　attributeName：目标属性名称；

　　from=""　to=""　:  从哪到哪；

　　dur：持续时间；

　　repeatCount="indefinite"　　动画的无限次播放

 

转载于:https://www.cnblogs.com/wwwzhaocom/p/10911705.html