• svg動畫中viewBox 和 preserveAspectRatio

      SVG的viewBox是一個非常強大的屬性,因為是它真正地允許SVG畫布無限延伸,并同時控制和精確定義SVG的可視空間。按照x、y、width和height的順序,viewBox有4個參數需要設置??梢园l現,viewBox的值并沒有帶單位,這是因為SVG可視空間并不是基于像素來設定的,而是一個可任意延展的空間,這樣就可以適應許多不同的尺寸。為了便于理解,我們想象圖1-1中的圖形是畫在一張方格紙中的(參見圖1-2)。

    圖1-2:SVG viewBox
      我們可以基于這張方格紙定義一個坐標系,這張方格紙本身是自我獨立的??梢噪S意改變這張方格紙的width、height或者任意事物。例如,如果我們將<svg> 的width和height減少一半,但是保留同樣的viewBox,那么結果就會是圖1-3所展示的這樣。

    圖1-3:viewBox改變后的結果
    譯者注
      我們可以理解為,所有圖形都基于viewBox的坐標系,并繪制在viewBox中,而viewBox會自動根據<svg>的寬高和下面要介紹的preserveAspectRatio來進行適配。
      這就是為什么SVG能成為響應式開發適配利器的其中一個原因。SVG同時也會存儲超出viewBox的信息。如果我們把一個圖形移動到viewBox之外,情況如圖1-4所示。

    圖1-4:將圖形溢出viewBox空間之外的結果
      如圖1-4所示,只有白色的區域是用戶能看到的,但實際上無論可視或是不可視區域內的繪圖信息,都會被SVG元素保存起來。這個特性讓SVG可被隨意伸縮和裁切。對于響應式應用來說這是十分方便的,特別是用于SVG Sprite技術。
      在這個例子中還隱藏了一個需要了解的關于viewBox的知識,那就是SVG的一個屬性——preserveAspectRatio。平時我們看到的許多SVG中都沒有這個屬性的聲明,所以大多數人都不了解它。它的初始值為xMidYMid meet,這使得viewBox以均勻的比例來適應SVG容器。
      關于這個屬性還有其他一些選項,其中第一個參數xMidYMid決定了SVG內的畫布是否以均勻的比例來縮放以及縮放的位置,寫法是以駝峰命名法構成的(注意Y是大寫)。雖然初始的縮放位置默認從正中間開始,但也有一些其他對齊選項,例如xMinYMax。你也可以將其設置為none,在這種情況下,SVG的橫縱比將會被忽略,整個viewBox畫布會以壓扁或拉伸的方式填充到SVG的可用空間中。
      第二個參數可選的值只有slice或meet。meet會按照SVG的橫縱比把整個viewBox的內容全部填充到SVG中,這個功能可以類比CSS3中的background-size:contain;,圖片內容會永遠保持在容器邊緣內部。
      slice允許viewBox超出用戶的可視區,并在指定方向上填充可用區域。你可以將其類比CSS3中的background-size:cover;,圖片內容會超出容器邊緣進行填充。
    譯者注
      Meet算法——計算viewBox的橫縱比width/height。
      ? 如果大于1:取SVG寬為viewBox的寬,根據比例計算viewBox的高,然后根據preserveAspectRatio中的第一個參數調整viewBox的位置。? 如果小于1:取SVG高為viewBox的高,根據比例計算viewBox的寬,然后根據preserveAspectRatio中的第一個參數調整viewBox的位置。
      Slice算法:首先假設SVG的寬高固定。當選擇slice后計算viewBox的橫縱比width/height。
      ? 如果大于1:取y軸方向為基準。整個viewBox的高設為SVG的高,然后再根據比例求出viewBox的寬,最后根據preserveAspectRatio中的x[Min|Mid|Max]調整繪制區域位置。此時Y[Min|Mid|Max] 無效。
      ? 如果小于1:取x軸方向為基準。整個viewBox的寬設為SVG的寬,然后再根據比例求出繪制區域的高,最后根據preserveAspectRatio中的Y[Min|Mid|Max]調整繪制區域位置。此時x[Min|Mid|Max] 無效。
      只要preserveAspectRatio的第一個參數不為none,就能保證viewBox是等比縮放的。
      關于PreserveAspectRatio的更多知識可閱讀張鑫旭的這篇文章,http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/。
    十八禁动漫露内裤扒开腿图片