深入理解SVG座標體系和transformations- viewport, viewBox,preserveAspectRatio

來源:互聯網
上載者:User

標籤:post   bsp   特定   htm   系統初始化   form   文章   width   建立   

本文翻譯自blog:

https://www.sarasoueidan.com/blog/svg-coordinate-systems/

SVG元素不像其他HTML元素一樣受css盒子模型所制約。這個特點導致transform和postioning svg元素顯得有些神秘,並且初看起來不是那麼淺顯易懂。然而,一旦你理解了SVG座標體系以及transformation是如何工作的,那麼操作SVG會變得非常簡單。本文中,我們將涵蓋控制SVG座標體系的三個方面內容:viewport, viewBox和preserveAspectRatio

這是包含三篇文章系列中的第一篇:

  • 理解SVG座標體系和transformations:就是本文
  • 理解svg座標體系和transformations: transform屬性
  • 理解svg座標體系和transformations: 建立新的viewports

和本文相對應的live demo:

https://www.sarasoueidan.com/demos/interactive-svg-coordinate-system/

SVG Canvas

canvas是SVG內容呈現的地區。概念上說,這個canvas在兩個緯度都是無窮大的。也就是說SVG可以為任何次寸。然而,SVG內容只能在有限的screen上(這就是一個有限的地區,並被稱為viewport),也就是viewport上顯示。SVG中落在這個viewport範圍之外的內容將被clipped off並且不可見。

viewport

viewport就是SVG可見的那部分地區。你可以把viewport想象為一扇窗戶,通過這個窗戶你可就可以看到一個特定地區的風景(SVG部分內容).而這個風景(SVG內容)通過這扇窗戶可以全部或者部分地可見。

SVG viewport和瀏覽器的viewport是類似的。一個web page可以是任何次寸大小,它可以比瀏覽器的viewport的寬度大,也可以比瀏覽器viewport的高度高。然而在同一時刻,我們只能看到web page的一部分(就是通過這個viewport)

是整個SVG canvas是否可見,還是僅部分canvas可見這個取決於size of that canvas乘於preserveAspectRation屬性的值

你可以通過設定最外層的svg元素的width和height屬性來指定這個viewport的次寸大小。

<!-- the viewport will be 800px by 600px --><svg width="800" height="600">    <!-- SVG content drawn onto the SVG canvas --></svg>

在SVG概念裡,屬性的值可以有也可以沒有對應的單位。A unitless value is said to be specified in user space using user units.如果值被指定為user units,那麼這個值就假設為具有"px"單位的值。這意味著上面的例子中我們就指定了viewport為800pxX600px的地區。

你也可以指定對應的單位,在SVG中支援的單位有:em,ex,px,pt,pc,cm,mm,in和百分比。

一旦最外層的SVG元素的width和height被指定了,瀏覽器將會建立一個initial viewport coordinate system和一個initial user coordinate system.

the initial coordinate system

初始的viewport coordinate system是建立在viewport之上的座標體系,從viewport左上方(0,0)點開始,正的x-軸往右生長,

正的y-軸向下生長initial coordinate system中的1個單位等於viewport中的一個"pixel".這個座標體系和通過css盒子模型建立起來的html座標體系是類似的。

the initial user coordinate system則是在SVG canvas上建立起來的座標系統。這個座標系統初始化時是和viewport座標系統是相等同的。

 

深入理解SVG座標體系和transformations- viewport, viewBox,preserveAspectRatio

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.