SVG學習總結

RUNNER_UP發表於2019-05-04
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在後組成第一個引數

meet,slice,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語法 可以線性疊加

相關文章