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=”” 写多变形角的坐标 fill-rule=”” ???
定义折线
Polyline points=”” 折点的坐标
定义路径
Path d=”M”
M是起点坐标 L是相邻点坐标 Z让路径构成闭合回路
H代表水平的线条 默认y轴上的值一样
V 代表垂直的线条 默认x轴上的值一样
A 后面跟七个值
Transfrom 转换 svg中的一个属性 translate rotate scale
平移 旋转 都是以起点0 0（svg的左上角）点为参考点 而css3中以元素的中心点为参考点
G 用于将相关元素进行组合
G身上的属性 子元素都会继承 但是g上的属性都必须是显现属性 不是svg元素私有的 比如 g 上的圆心坐标不行
Text 用于定义文本 x y xy的值在字体的左下角
Text-anchor=”middle” 让字体居中
Image 绘制图片
Use用于复制元素 x y
Xy 是相对于原始的元素的坐标位置 不是相对svg的00点坐标
Animate
写在需要动画元素的中间
attributeName form to dur repeatCount=”indefinite”(无限次)
echarts
引入文件后 console.log(echarts) //echarts object