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