---

12.17学习经验分享#

Bruce_Zhu于2016.12.17

---

SVG##

 
——SVG特点：

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

SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C("World Wide Web ConSortium" 即 " 国际互联网标准组织")在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。

小试牛刀-SVG简单绘制：#####

<pre>

<svg style="width: 400px;height: 400px;background: pink;">

            <!--都是通过fill来设置背景色-->
            <!--矩形-->
        <rect id="rect" x="100" y="100" width="50" height="50" fill="orange" stroke="red" stroke-width="5" style="fill:yellow;"></rect>
        
            <!--圆-->
        <circle cx="50" cy="50" r="50" fill="orange" stroke="yellow" stroke-width="5"></circle>
        
            <!--椭圆-->
        <ellipse cx="100" cy="210" rx="80" ry="50" fill="yellow"></ellipse>
         
            <!--必须使用stroke设置线的颜色才能显示出来,只能设置直线，不能做折线-->
            <!--直线-->
        <line x1="0" y1="0" x2="400" y2="400" stroke="white"></line>
        
            <!--折线-->
            <!--会自动将折线包含的内容填充为黑色，但没闭合,使用fill将填充色设置为背景色-->
            <!--用折线绘制矩形在闭合时有bug-->
        <polyline points="100,20 20,100 200,200 100,20" stroke="red" stroke-width="10" fill="pink"></polyline>
        
            <!--绘制多边形-->
        <polygon points="100,350 20,100 200,200 100,350" stroke="red" stroke-width="10" fill="pink"></polyline>
    </svg>

</pre>

小试牛刀-SVG渐变：#####

<pre>
<svg style="width:400px;height:400px;">

<defs>


<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="100%">

<stop offset="0%" stop-color="red"></stop>
<stop offset="100%" stop-color="orange"></stop>
</linearGradient>
</defs>

        <rect x="0" y="0" width="400px" height="400px" fill="url(#linear)" stroke="yellow" stroke-width="5"></rect>
    </svg>
    
    
    <svg width="500" height="500" fill="orange"> 
       <defs> 

          <filter id="Gaussian_Blur"> 

                <!--fegaussianblur- 高斯模糊,stdDeviation - 设置模糊程度 -->
                <feGaussianBlur in="SourceGraphic" stdDeviation="3"> 

          </filter>
       </defs>

       <rect x="0" y="0" width="400" height="400" filter="url(#Gaussian_Blur)">

    </svg>

</pre>