svg基础学习笔记

svg学习笔记


1.rectangle（矩形）








 
  Sorry, your browser does not support inline SVG.  

 




width和height 代表矩形的宽度和高度，


x：代表矩形的左边的位置


y：代表矩形的上边的位置


fill 代表矩形填充的颜色，


stroke-width 代表矩形的边框的宽度，


stroke：边框的颜色，


fill-opacity 代表矩形填充颜色的透明度，


stroke-opacity 代表边框颜色的透明度


opacity：代表整个矩形的透明度（包括边框）


rx和ry：代表矩形的四个边角的弯曲程度










2.circle圆形







 
  Sorry, your browser does not support inline SVG.  
 
 



cx与cy代表圆形的圆心离left和top的距离，默认（不设置这两个元素的值）为0


r：代表圆形的半径大小


stroke：圆形边框的颜色


stroke-width：圆形边框的宽度


fill：圆形的填充颜色










3.ellipse椭圆








 
  Sorry, your browser does not support inline SVG.  







cx与cy代表椭圆的圆心离left和top的距离，默认（不设置这两个元素的值）为0


rx：椭圆的水平半径


ry：椭圆的垂直半径


stroke：椭圆边框的颜色


stroke-width：椭圆边框的宽度








4.line 线条








 
  Sorry, your browser does not support inline SVG.







x1和y1:代表开始点的x与y坐标


x2和y2:代表开始点的x与y坐标








5.polygon 多边形








 
  Sorry, your browser does not support inline SVG.







points：里面全是各个点的坐标






6.polyline 折线








 
  Sorry, your browser does not support inline SVG.







points：里面全是各个点的坐标








7.path 路径


M = moveto  开始的点
L = lineto  直线的点
H = horizontal lineto
V = vertical lineto
C = curveto  曲线的点
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath  关闭的点








 
  Sorry, your browser does not support inline SVG.











8 text文字








  Several lines:
    First line.
    Second line.
  
  Sorry, your browser does not support inline SVG.

 




x与y是坐标值