12.17學習經(jīng)驗分享#
Bruce_Zhu于2016.12.17
SVG##
?
——SVG特點：
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用于網(wǎng)絡的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
SVG 是萬維網(wǎng)聯(lián)盟的標準
SVG 與諸如 DOM和 XSL 之類的W3C標準是一個整體
SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標記語言（XML）牺蹄，用于描述二維矢量圖形的一種圖形格式纱新。SVG是W3C("World Wide Web ConSortium" 即 " 國際互聯(lián)網(wǎng)標準組織")在2000年8月制定的一種新的二維矢量圖形格式，也是規(guī)范中的網(wǎng)絡矢量圖形標準述暂。SVG嚴格遵從XML語法晃财，并用文本格式的描述性語言來描述圖像內(nèi)容叨橱，因此是一種和圖像分辨率無關的矢量圖形格式。
小試牛刀-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>
<!--折線-->
<!--會自動將折線包含的內(nèi)容填充為黑色罗洗，但沒閉合,使用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>
