比喻

想象一個(gè)無窮大的畫布，你可以在畫布上的任何地方繪制你想要的任何內(nèi)容，你也可以以任何你想要的尺寸來繪制。這就是SVG畫布。

現(xiàn)在接著想象，有人在你的畫布正前方建立了一堵同樣的無窮大的墻，墻的寬度和高度也是無限延伸的，把畫布全都擋住了。

因?yàn)閴Χ际侵苯臃旁诋嫴记懊娴模晕覀儫o法看到畫布上的內(nèi)容。但是建墻的人很好，幫我們開了一扇窗戶，甚至還給了我們設(shè)置這扇窗戶大小尺寸的能力。這扇窗戶就是SVG視窗。

墻的筑造者并沒有在這里停住。他還給我們留下了工具，我們可以用它來移動(dòng)畫布，決定要將畫布的哪部分顯示在窗口區(qū)域，還可以決定要顯示的區(qū)域的大小。這些工具在SVG元素中是以屬性的形式（viewBox和preserveAspectRatio）表現(xiàn)出來的。

我會(huì)在接下來的兩周講解這些屬性。今天我想將內(nèi)容集中在畫布、墻、視窗上，先從它們使用的坐標(biāo)系統(tǒng)講起：
SVG坐標(biāo)系統(tǒng)

雖然SVG和CSS盒模型的表現(xiàn)形式不一樣，但是它們的坐標(biāo)系統(tǒng)的工作方式是相同的。

所有SVG坐標(biāo)系的起點(diǎn)(0,0)都是在父元素的左上角，它們的父元素可以是body元素、div元素、或其它的容器。

當(dāng)你創(chuàng)建了一個(gè)新的SVG元素，你也就創(chuàng)建了一個(gè)新的坐標(biāo)系統(tǒng)，即無窮大的SVG畫布。起點(diǎn)可能是和父元素的左上角對(duì)齊，但是畫布在所有方向無限延伸的。x軸的正方向是向右，y軸的正方向是向下。兩個(gè)坐標(biāo)軸的負(fù)方向也會(huì)向左邊和上邊延伸。

關(guān)于SVG有一點(diǎn)需要明白的就是多坐標(biāo)系統(tǒng)的同時(shí)使用。每次你創(chuàng)建一個(gè)新的SVG元素，就相當(dāng)于在它的坐標(biāo)空間創(chuàng)建了一個(gè)新的畫布，同時(shí)也創(chuàng)建了一個(gè)視窗。

每一對(duì)畫布和視窗的坐標(biāo)系統(tǒng)都是默認(rèn)對(duì)齊的。它們看起來就像是在同一個(gè)系統(tǒng)內(nèi)，但其實(shí)并不是。正如我們接下來要看的，你可以改變它們相互對(duì)齊的方式。

在實(shí)際中，你在無窮大的畫布上創(chuàng)建的元素是放置在畫布的原點(diǎn)附近的，但是理論上，它們是可以放在任何地方的。你可以創(chuàng)建一個(gè)圓，然后把它放在原點(diǎn)右邊四十億像素遠(yuǎn)的地方，沒人阻止你這樣做。

理論上，窗口也可以是接近無窮大的，你可以設(shè)置你想要的任何尺寸。但是，你只有固定了窗口的尺寸，它才可以是固定大小的，而且你一旦設(shè)置了尺寸，坐標(biāo)系統(tǒng)將會(huì)在空間上保持這個(gè)大小。

用戶代理程序（即瀏覽器）會(huì)默認(rèn)對(duì)齊這兩個(gè)坐標(biāo)系統(tǒng)的原點(diǎn)和坐標(biāo)軸，但是你可以根據(jù)自己的需要改變這種對(duì)齊方式。

這兩個(gè)系統(tǒng)可以設(shè)置不同的單位?？梢园岩粋€(gè)設(shè)置為像素，另一個(gè)設(shè)置為毫米、picas、英寸、點(diǎn)、ems，或者其他任何你想要的單位。百分比%是例外，它不能在這里使用。

再次記住，這兩個(gè)坐標(biāo)系統(tǒng)，一個(gè)是作用在無窮大的畫布上的，另一個(gè)是作用于固定窗口的。
SVG視窗

每次你創(chuàng)建了一個(gè)新的SVG元素，你也就創(chuàng)建了一個(gè)新的SVG視窗。視窗的大小等于你為SVG元素設(shè)置的寬度和高度。

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表