矢量图和位图

矢量图：基于数学的描述

位图：基于像素点的描述

svg的使用

1、浏览器直接打开svg文件

2、通过IMG标签使用

3、通过SVG标签使用

4、作为CSS背景使用

基本图形和基本属性

基本图形：rect circle ellipse line polyline polygon

基本属性：

fill：填充色

stroke：描边色

stroke-width：描边宽度

transform：图形变换

rect

x：起点x

y：起点y

width：宽度

height：高度

rx：圆角x

ry：圆角y

circle

cx：圆心x

cy：圆心y

r：半径

ellipse

cx：圆心x

cy：圆心y

rx：半径x

ry：半径y

line

x1：起点x

y1：起点y

x2：终点x

y2：终点y

polyline

points：属性(xi, yi)+

xi：第i点x

yi：第i点y

1 
        
          2     
         11 12     
         18 19     
         26 27     
         33 34     
         38 39     
         43 
        

 

svg api接口

创建图形：document.createElementNS(ns, tagName)

添加图形：appendChild(element)

获取属性：getAttribute(attr)

设置属性：setAttribute(attr, val)