SVG 基本知識:SVG 放大縮小之 viewbox 初探 (1)

最近作了一個關於SVG的應用的技術分享網站svgtrick.com,會同步一些文章到這裏來,更多的能夠去網站看看。css

接觸過SVG都知道,SVG有本身的一套座標視窗系統,理解它對於在SVG的使用,特別是要對SVG進行放大縮小,viewbox是必需要了解的一個知識點,而viewbox則是SVG中一個相對複雜的概念,打算分兩篇來聊聊它,這篇文章就來聊聊SVG中的viewbox的一個基本知識和基本的應用。html

viewport

首先來了解下SVG中的viewport這個概念,簡單來講viewbox就是值指SVG圖片自己可視區域的大小,除了SVG自己,其它一些元素也有可視區域的限制,好比symbolimagepattern等。瀏覽器

在SVG中viewport主要是經過widthheight屬性來定義的。好比,咱們定義一個width="600"height="600"就表示咱們定義了一個600X600的可視區域,這與html和css中還有一點不一樣,SVG自己定義這些屬性並無單位,不過基本上都是以像素px爲單位的。svg

viewbox

viewbox確實是SVG中比較難懂抽象的一個屬性,第一次接觸它確實不知道它幹嗎用的,就算理解了在使用中,有可能仍是不知道如何去設置它。網站

viewbox簡單的理解就是用來定義SVG的可視範圍,那跟上面提到的viewbox有什麼關係呢?這樣來講吧,當沒有設置viewbox的時候,viewbox就是整個viewport的大小,而當咱們設定了viewbox,等於就是告訴SVG,我指定的這個區域是我要顯示的,SVG就會把這個區域放大到viewport的大小,好比電視機,電視機就是那麼大(viewport),而電視機裏的畫面,能夠特寫也能夠全景,這就是viewbox。spa

preserveAspectRatio

preserveAspectRatio和viewbox是一個絕配的搭檔,特別是當viewbox的值和viewport的值(也就是寬和高)不同的時候,preserveAspectRatio屬性就直接決定瀏覽器怎麼來顯示圖片。code

preserveAspectRatio這個屬性有幾個參數,要特別注意下,具體能夠去這個地址詳細瞭解下
文檔地址htm

下面咱們來經過幾個實例來了解下viewbox的實際應用。圖片

實例

首先來看看viewbox的值和viewport的值同樣的表現,代碼以下所示:rem

<div class="contain-demo">
  <svg width="115" height="190" viewBox="0 0 115 190">
    <desc>Green pear to show effects of matching viewport and viewBox.</desc>
    <g>
      <path fill="#BBC42A" d="M4.976,126.451c-0.571,1.76-1.067,3.551-1.475,5.377c-6.62,29.681,7.465,54.363,43.244,56.718 c56.994,3.751,77.653-25.65,60.462-67.25C90.017,79.697,82.063,89.688,80.366,57.764c-0.764-14.367-11.098-27.167-26.203-24.576
      c-17.378,2.982-19.794,19.916-22.192,34.44C28.36,89.508,11.623,105.957,4.976,126.451z"/>
      <path fill="none" stroke="#59351C" stroke-width="7" stroke-linecap="round" d="M56.427,40.406
     c0,0-7.375-15.376,8.06-35.837"/>
      <path fill="#7AA20D" stroke="#7AA20D" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="
     M54.247,35.412c0.787-3.843,3.55-7.335,8.368-9.848c10.053-5.244,18.075-4.042,28.061,0.2c0.004,0.002,12.83,5.449,20.517-4.672
      c-4.778,6.291-9.415,12.478-14.878,18.237c-8.878,9.359-25.348,22.181-37.176,9.661C55.019,44.629,53.349,39.793,54.247,35.412z"/>
    </g>
  </svg>
</div>

從上面代碼能夠看出咱們把viewbox的值設置和viewport的寬和高同樣,運行結果以下圖所示:

demo地址

減少viewbox

若是咱們把viewbox的值各減小50px,咱們就定義了SVG要顯示的區域,結果就是SVG會把整個圖像的左部區域拉大填滿整個畫布顯示,以下圖所示:

詳細代碼能夠去這裏查看。

增長viewport

上面因爲咱們減小了viewbox,因爲SVG的可視區域也就是viewport不足以容納顯示整個內容,因此纔會出現上圖所示的只顯示了圖片的部份內容。

下面咱們把SVG的可視區域也就是viewport的寬高各增長200px,viewbox保持115和190不變,則SVG內容會直接鋪滿整個可視區域,以下圖所示:

demo地址

這一篇先了解了viewbox的一些基本知識以及應用,下一篇再來深刻了解下它的其它一些參數以及應用。

參考文章:A Look At SVG viewBox and viewport,文章的實例都來自這篇文章。

相關文章
相關標籤/搜索