SVG基本图形（构建方法和说明）

前言

  SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  SVG 用来定义用于网络的基于矢量的图形
  SVG 使用 XML 格式定义图形
  SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  SVG 是万维网联盟的标准
  SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
  SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。

以下内容必须写在<svg></svg>中才能使用！

    <svg  xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height=600>
    </svg>

  svg可通过本身的样式控制图形显示范围，超出部分消失。可以理解为一个盒子（并且加上了绝对定位和溢出隐藏等属性）。
  可以单独写在txt文本中，但要改后缀名为.svg
  也可以写在body里面等等。

1 SVG基本图形

1.1 矩形 <rect>

  rx和ry属性可以产生圆角

               x="矩形的左上角的x轴"
               y="矩形的左上角的y轴"
               rx="x轴的半径（round元素）"
               ry="y轴的半径（round元素）" 
               width="矩形的宽度"。必需的。
               height="矩形的高度"。必需的。
              
               file 填充颜色
               stoke 边框颜色
               stoke-width 边框的宽度
               style

例：<rect x="600" y="20" width="200" height="200" rx="20" ry="20" fill="blue" stroke="orange" stroke-width="20"/>
效果图：

1.2 圆形 <circle>

  如果省略cx和cy，圆的中心会被设置为(0, 0)

               cx="椭圆x轴坐标"
               cy="椭圆y轴坐标"
               r 半径
             
               fill填充颜色
               stroke 边框颜色
               stroke-width 边框宽度

例：<circle cx="800" cy="200"r="80"style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.5;stroke-opacity:0.9" ></circle>
效果图：

1.3 椭圆 <ellipse>

               cx="椭圆x轴坐标"
               cy="椭圆y轴坐标"
               rx="沿x轴椭圆形的半径"。必需。
               ry="沿y轴长椭圆形的半径"。必需。
               fill填充颜色
               stroke 边框颜色
               stroke-width 边框宽度

例：<ellipse cx="300"cy="300"rx="120"ry="80"fill="gold" stroke="red" />
效果图：

1.4 线 <line>

               x1="直线起始点x坐标"
               y1="直线起始点y坐标"
               x2="直线终点x坐标"
               y2="直线终点y坐标"
              可+style="fill:颜色;stroke:边框颜色;stoke-width:边框宽度;opacity:透明度;..."

例：<line x1="500" y1="50" x2="600" y2="100" stroke="orange" stroke-width="8" />
效果图：

1.5 折线 <polyline>

              points=折线上的"点"。必需的。
              file  默认的是黑色black
              可+style="fill:颜色;stroke:边框颜色;stoke-width:边框宽度;opacity:透明度;..."

例：<polyline points="0,0 50,50 75,25 100,100 200,50"style="fill:none;stroke:blue;stroke-width:5;"/>
（这个,可加可不加 不加用空格代替）
效果图：

1.6 多边形<polygon>（定义一个包含至少三边图形）

              points="多边形的点。点的总数必须是偶数"。必需的。
              可+style="fill:颜色;stroke:边框颜色;stoke-width:边框宽度;opacity:透明度;..."

      坐标顺序从左往右（顺时针方向）。

例：<polygon points=" 20,20 75,20 150,50 250,20 500,220"fill="none"stroke="green" stroke-width="5"/>
效果图：

1.7 路径 <path>

                下面的命令可用于路径数据：
                M = moveto（移动至）
                L = lineto（画线）
                H = horizontal lineto（横画线）
                V = vertical lineto（垂直画线）
                C = curveto（曲线）
                S = smooth curveto（流畅/光滑 曲线）
                Q = quadratic Belzier curve（二次/平方 贝赛尔曲线）
                T = smooth quadratic Belzier curveto（流畅/光滑 二次/平方 贝赛尔曲线）
                A = elliptical Arc（椭圆弧）
                Z = closepath（关闭路径 默认最后一个坐标）

  所以这个标签理论上能完成上面所有图形。
例：

<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>

效果图：
例：

   <path d="M50 140 A60 60 0 0 0 150 140
            M50 140 A60 160 0 0 0 150 140
            M50 140 A60 250 0 0 0 150 140
            M50 140 A60 30 0 0 0 150 140
   " fill="green" stroke="white" stroke-width="3" />

效果图：
path命令：传送门
参考图：