svg矢量图

　　svg：矢量图

　　canvas：用于绘制位图

　　svg：使用xml格式绘制图形

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

　　svg 命名空间  xmlns="http://www.w3.org/2000/svg"  版本 version="1.1"

　　svg如果不设置大小，默认占用位置 300x150

　　定义矩形：rect标签，必填的两个属性 width height

　　rect的属性：

　　　　width：宽

　　　　height：高

　　　　x：x轴坐标；

　　　　y：y轴坐标；

　　　　rx：边框圆角；

　　　　style="fill;red"：样式属性

　　　　fill：填充颜色

　　　　stroke-width：边框宽度

　　　　stroke：边框颜色

　　　　fill-opacity：填充透明度

　　　　stroke-opacity：边框透明度；

　　　　opacity：同时定义填充和边框的透明度

　　定义圆：circle标签

　　　　属性：

　　　　　　cx：定义x轴坐标

　　　　　　cy：定义y轴坐标

　　　　　　r：半径

　　　　　　style="fill;red"：样式属性

　　　　　　fill：填充颜色

　　　　　　stroke-width：边框宽度

　　　　　　stroke：边框颜色

　　　　　　fill-opacity：填充透明度

　　　　　　stroke-opacity：边框透明度；

　　　　　　opacity：同时定义填充和边框的透明度

　　定义椭圆：ellipse标签

　　　　属性：

　　　　　　cx：定义x轴坐标；

　　　　　　cy：定义y轴坐标；

　　　　　　rx：定义x轴半径；

　　　　　　ry：定义y轴半径；

　　　　　　style="fill;red"：样式属性

　　　　　　fill：填充颜色

　　　　　　stroke-width：边框宽度

　　　　　　stroke：边框颜色

　　　　　　fill-opacity：填充透明度

　　　　　　stroke-opacity：边框透明度；

　　　　　　opacity：同时定义填充和边框的透明度

　　绘制直线的标签：line

　　　　属性：

　　　　　　x1：起始坐标 x 轴

　　　　　　y1：起始坐标 y 轴

　　　　　　x2：结束坐标 x 轴

　　　　　　y2：结束坐标 y 轴

　　定义多边形：polygon标签

　　　　属性：

　　　　　　points：用于定义写多边形角的坐标，

　　　　　　案例：points="20,12 50,45 30,60"

　　　　　　fill-rule：奇偶判断；

　　折线：polyline标签：由直线绘制路径

　　　　属性：

　　　　　　points：同polygon标签；

　　路径：path，分大小写，大写代表绝对 ，小写代表相对；

　　　　属性：

　　　　　　d：多个属性的集合

　　　　　　M：代表起始点 moveTo

　　　　　　L：代表领点 lineTo

　　　　　　Z：代表 closePath；构成一个闭合回路

　　　　　　案例：d="M100,30 L200,20 Z";

 　　　　　　H：代表水平划线（默认与y轴上面的值一致）

　　　　　　 v：代表垂直线条（默认与x轴上面的值一致）

　　　　　　A：用于划曲线　　x 代表半径   y 代表半径  0 代表角度（0代表圆） 弧长（0代表小狐长，1代表大弧长），方向（0代表逆时针，1代表顺时针），终点的x坐标，终点的y坐标；

　　　　　　案例：<path d="M30,30 A25,75,90,1,1,80,80 " stroke="red"></path>   椭圆案例

　　　　　　　　　<path d="M30,30 A25,25,0,0,0,80,80" stroke="red"></path>　　半圆案例

　　　　　　画图解释A 

　　　　　　

　　transform属性：svg中的一个属性，translate 代表平移 ，rotate 代表旋转 ，scale 代表缩放

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

　　text标签：定义文本：x，y的值在字体左上角，text-anchor="middle" 让字体居中

　　g标签：用于相关元素的一个组合；

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

　　image标签：绘制图片　　

　　　　x：x轴坐标

　　　　y：y轴坐标

　　　　width：宽

　　　　height：高

　　　　xlink:href="图片路径"

　　use标签：复制一个

　　　　x属性和y属性：相对于被克隆的坐标位置　　不是相对于svg的0，0点的坐标

　　　　xlink:href属性：复制标签的锚点；

　　　　案例：

　　　　　　<text x="60" y="30" text-anchor="middle" stroke="red" id="a">hello world</text>

　　　　　　<use x="2" y="2" xlink:href="#a"></use>

　　animate标签：动画

　　　　attributeName：目标属性名称；

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

　　　　dur：持续时间

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

　　　　注意事项：写在需要动画元素的中间

　　　　案例：

　　　　　　<rect x="60" y="50" width="50" height="50" fill="red">

　　　　　　　　<animate attributeName="width" from="50" to="200" dur="2" repeatCount="indefinite"></animate>

　　　　　　</rect>

 

转载于:https://www.cnblogs.com/shangjun6/p/10895431.html