学习SVG系列（2）：SVG图形系列

SVG形状：

         矩形 <rect>

         圆形 <circle>

         椭圆 <ellipse>

         线 <line>

         折线 <polyline>

         多边形 <polygon>

         路径 <path>

矩形

<?xml version="1.0"?>

<svg viewBox="0 0 120 120" version="1.1"

  xmlns="http://www.w3.org/2000/svg">

  <circle cx="60" cy="60" r="50"/>

</svg>

circle标签用于创建一个圆，cx表示圆心横坐标，cy表示圆心纵坐标，r表示圆心半径，默认填充为黑色 ，用fill来设置填充颜色

椭圆

         <?xml version="1.0"?>

<svg width="120" height="120"

     viewPort="0 0 120 120" version="1.1"

     xmlns="http://www.w3.org/2000/svg">

    <ellipse cx="60" cy="60" rx="50" ry="25"/></svg>

ellipse用于创建一个椭圆，cx、cy用于设置圆心的横坐标、纵坐标，rx用于设置横轴，ry用于设置纵轴，默认为填充颜色为黑色 

图片

<svg width="100%" height="100%" viewBox="0 0 100 100"

     xmlns="http://www.w3.org/2000/svg"

     xmlns:xlink="http://www.w3.org/1999/xlink">                 

  <image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" />         

</svg>

image用于加载一张图片，xlink:href属性用于连接图片资源路径，x、y开始坐标点位置，height、width照片宽高

画线

    <svg width="120" height="120"

          version="1.1"

         xmlns="http://www.w3.org/2000/svg">

        <line x1="20" y1="100"

              x2="100" y2="20"

              stroke="black"

              stroke-width="2" />

    </svg>

         line标签用于创建一条线，x1,y1初始坐标轴点，x2,y2终止坐标点       

画路线图

<svg width="100%" height="100%" viewBox="0 0 400 400"

     xmlns="http://www.w3.org/2000/svg">

  <path d="M 100 100 L 300 100 L 200 300 z"

        fill="orange" stroke="black" stroke-width="3" />

</svg>

         path标签用于创建一个路径，d表示一系列的坐标值

         d值解析：

         M x,y = moveto,将画笔移到指定的坐标位置

         L x,y = lineto,划线到指定的坐标位置

         H x = horiziontal lineto,画水平线到指定的X坐标位置

         V y = vertical lineto,画垂直线到指定的Y坐标位置

         C x1,y1 x2,y2 endx,endy 三次贝赛曲线

         T x,y = smooth quadratic Belzier curveto,映射

         A Rx,Ry,XROTATION,FLAG1,FLAG2,x,y = elliptical Arc,弧线

         Z = closepath() , 关闭路径

         A指令：

                   Rx,Ry 指所在椭圆的半轴大小

                   XROTATION指椭圆的x轴与水平方向顺时针方向夹角，可以想象成一个水平的椭圆绕中心顺时针旋转的角度

                   FLAG1有两个值，1表示大角弧线，0表示小角度弧线

                   FLAG2 有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针

                   x,y 为终点坐标

多边形

         <svg width="120" height="120"

     viewPort="0 0 120 120" version="1.1"

     xmlns="http://www.w3.org/2000/svg">

    <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>

</svg>

         polygon标签用于创建多边形

         points值，多对坐标值表示       

折线

         <svg width="120" height="120"

     viewPort="0 0 120 120" version="1.1"

     xmlns="http://www.w3.org/2000/svg">

    <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/></svg>

         polygon用于创建折线

         points值，多对坐标值表示

矩形

<svg width="120" height="120"

     viewBox="0 0 120 120"

     xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10"

        width="100" height="100"

        rx="15" ry="15"/></svg>

         rect标签用于创建一个矩形

         x,y表示起始坐标

         rx,ry 表示四个角的弧度