SVG 4年前

编程语言
228
SVG

1.SVG   图表,动效

Scalable Vector Graphics  可缩放矢量图形  是一种用来描述二维矢量图形的XML标记语言。

SVG面向图形,HTML面向文本。

2.SVG和Canvas的区别

   Canvas做图是在画布上通过js来控制动态

   SVG是通过标签来实现的

   SVG放大之后不会失真,Canvas放大后会失真

3.应用场景

   图表

   图标(icon)==>动态的加载小图标

   动效

   矢量图

4.SVG元素

 

5.实现

  1)直线

        // 必须写

     

      x1 y1是起始位置,x2 y2是在xy轴方向的长度

 2)矩形

   

    xy 矩形的起止点,width,height宽高 rx,ry是xy轴方向上的圆角

     a.不用stroke(),默认有填充黑色背景

     b.

 3) 圆形

   

    r是半径,cx cy是中心点的位置

 4)椭圆

   

   rx,ry水平方向,垂直方向的半径,cx,cy是中心点的位置

注意:上述标签是写在元素之间

 5)折线

    

     

  是点的集合,每两个数字表示点的坐标

6)多边形

 

  

  可以将最后一条线进行闭合,","可加可不加,但是最好加上,容易区分

7)文本

  hello word

  x,y表示在x,y轴方向的位置描画文本

注意:stroke表示描边,fill表示填充

image
chean
虫子从来就没有真正被战胜过。
4
发布数
0
关注者
1595
累计阅读

热门教程文档

Flutter
105小节
Docker
62小节
Djiango
17小节
React
18小节
QT
33小节
广告