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>