svg基础--基本语法与标签

###svg系列–基础
这一系列的文章会总结svg的基础知识和一些经典的案例。

####svg简介
SVG（Scalable Vector Graphics）is an XML-based Language for creating graphics.
这是MDN英文文档对svg的介绍。

svg支持css,这一点有效的将图形和样式区分开。

svg的应用：
1、绘图
2、动画

####如何在网页中引用svg元素

    svg元素可以通过<embed>、<object>或者<iframe>嵌入网页之中，但是我们这里推荐使用<embed>,兼容性比较好。

    <embed src="circle.svg" type="image/svg+xml" />

    <svg width="" height="">绘制的内容</svg>

####一些公共属性

    ----------------
      公共属性
    ----------------

    fill: 填充色 | url(id)这里主要是引用渐变色作为背景
    stroke: 线条的颜色
    stroke-width: 线条的宽度
    stroke-linecap: 线条末尾的样式 (默认)butt (圆角)round (方形)square ----- round和square会影响线条的长度
    opacity: 不透明度  0~1
    fill-rule: nonzero (非零环绕原则)evenodd
    stroke-dasharray: 创建虚线数组 x,y,z,..... (长度，间隔，长度，间隔，。。。。)
    stroke-dashoffset: 偏移
    filter: url(id) 添加滤镜  

####绘制矩形

    ---------
      矩形
    ---------
    <rect x="" y="" rx="" ry="" width="" height=""></rect>
    (x, y): 左上角坐标
    rx: x轴圆角半径
    ry: y轴圆角半径
    width: 长度
    height: 高度  

####绘制圆

    ---------
      圆
    --------