SVG學習總結

SVG(Scalable Vector Graphics)可縮放矢量圖 是一種使用 XML 描述 2D 圖形的語言。
SVG 基於 XML，這意味着 SVG DOM 中的每一個元素都是可用的。您能夠爲某個元素附加 JavaScript 事件處理器。
在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。

svg的一些優點：

• SVG 可被很是多的工具讀取和修改（好比記事本）
• SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
• SVG 是可伸縮的
• SVG 圖像可在任何的分辨率下被高質量地打印
• SVG 可在圖像質量不降低的狀況下被放大
• SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖）
• SVG 能夠與 Java 技術一塊兒運行
• SVG 是開放的標準
• SVG 文件是純粹的 XML

svg可經過<object>,<embed>,<iframe>標籤引入html中。

圖形繪製中的一些tips

• 顯示層次由標籤自上至下順序指定
• stroke-dasharray: 虛線定義 顯示隱藏像素數循環
• rect的弧度 由rx,ry指定 若是存在一個值未定義 則默和已存在的值相等。
• X1,y1 x2,y2做爲點位置的書寫方式

SVG經過視窗、視野控制svg的顯示

• 視窗由svg的width,height控制 視野有viewBox屬性控制
• 視窗是html引入svg的顯示大小。視野是svg上會被顯示的的區域。先經過視野獲取顯示內容，再縮放適配到視窗。
• 默認視窗的大小是300px、150px
• viewBox 注意B大寫。不然無效
• 若是不指定視窗尺寸 但指定viewBox視野 則默認填充
• 視窗，視野都指定而且成比例。則通過縮放直接適配。若是兩者不等比例。則須要preserveAspectRatio屬性來肯定填充策略。
  preserveAspectRatio

第二個參數	描述
meet（默認）	保持長寬比,整個viewBox在viewport中可見； 圖形每每縮小
slice	保持長寬比,viewBox覆蓋viewport的所有區域； 圖形每每放大
none	不在保持長寬比，直接拉伸縮放，但若是第一個參數存在則無效

當第二個參數選擇meet/slice時 就會出現某個方向未被填滿，或者溢出的狀況須要設置x,y方向的對齊策略

第一個參數	描述
xMin/xMid/xMax	x方向左對齊，居中對齊，右對齊
YMin/YMid/YMax（Y大寫）	y方向左對齊，居中對齊，右對齊

兩行組合在一塊兒x在前，y在後組成第一個參數

黑色矩形爲視野，虛線矩形爲視窗

漸變

線性漸變

<defs>
    <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
    </linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>
</svg>
複製代碼

• 漸變方式獨立定義
• x1,y1,x2,y2描述漸變方向
• 若是offset若是出現逆序 例如：50% green,30% red 30%會變爲50% 圓滑過分的綠色的另外一半變成紅色。而且有明顯的紅綠分隔線。

放射漸變

cx,cy 徑向漸變的中心點X和Y座標。它的值使用用填充的百分比值。若是沒有定義則默認值爲50%
fx, fy 徑向漸變的焦點X和Y值。它的值使用用填充的百分比值。若是沒有定義則默認值爲50%。
注意：在Firefox 3.05中若是值低於5%可能會發生問題。
**徑向漸變的聚焦點是顏色輻射的角度。**你能夠將徑向漸變想象爲一盞燈，那麼聚焦點決定燈光從什麼方向「照射」在圖形上。50%,50%表示在圖形的正上方， r 徑向漸變的半徑

變換

相似於css tranform語法 能夠線性疊加