SVG
svg:矢量图
canvas:用于绘制位图
svg:使用xml格式绘制图形
svg:要有一个根节点,标签就相当于html
svg如果不设置大小,默认占用位置 300x150
定义矩形:rect标签,必填的两个属性 width height
rect的属性:
width:宽
height:高
x:x轴坐标;
y:y轴坐标;
rx:边框圆角;
:样式属性
fill:填充颜色
stroke-width:边框宽度
stroke:边框颜色
fill-opacity:填充透明度
stroke-opacity:边框透明度;
opacity:同时定义填充和边框的透明度
定义圆:circle标签
属性:
cx:定义x轴坐标
cy:定义y轴坐标
r:半径
:样式属性
fill:填充颜色
stroke-width:边框宽度
stroke:边框颜色
fill-opacity:填充透明度
stroke-opacity:边框透明度;
opacity:同时定义填充和边框的透明度
定义椭圆:ellipse标签
属性:
cx:定义x轴坐标;
cy:定义y轴坐标;
rx:定义x轴半径;
ry:定义y轴半径;
:样式属性
fill:填充颜色
stroke-width:边框宽度
stroke:边框颜色
fill-opacity:填充透明度
stroke-opacity:边框透明度;
opacity:同时定义填充和边框的透明度
绘制直线的标签:line
属性:
x1:起始坐标 x 轴
y1:起始坐标 y 轴
x2:结束坐标 x 轴
y2:结束坐标 y 轴
定义多边形:polygon标签
属性:
points:用于定义写多边形角的坐标,
fill-rule:奇偶判断;
折线:polyline标签:由直线绘制路径
属性:
points:同polygon标签;
路径:path,分大小写,大写代表绝对 ,小写代表相对;
属性:
d:多个属性的集合
M:代表起始点 moveTo
L:代表领点 lineTo
Z:代表 closePath;构成一个闭合回路
H:代表水平划线(默认与y轴上面的值一致)
v:代表垂直线条(默认与x轴上面的值一致)
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属性:复制标签的锚点;
animate标签:动画
attributeName:目标属性名称;
from="" to="" : 从哪到哪;
dur:持续时间
repeatCount="indefinite" 动画的无限次播放
注意事项:写在需要动画元素的中间