比喻

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

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

因?yàn)閴Χ际侵苯臃旁诋?huà)布前面的，所以我們無(wú)法看到畫(huà)布上的內(nèi)容。但是建墻的人很好，幫我們開(kāi)了一扇窗戶，甚至還給了我們?cè)O(shè)置這扇窗戶大小尺寸的能力。這扇窗戶就是SVG視窗。

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

我會(huì)在接下來(lái)的兩周講解這些屬性。今天我想將內(nèi)容集中在畫(huà)布、墻、視窗上，先從它們使用的坐標(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)，即無(wú)窮大的SVG畫(huà)布。起點(diǎn)可能是和父元素的左上角對(duì)齊，但是畫(huà)布在所有方向無(wú)限延伸的。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è)新的畫(huà)布，同時(shí)也創(chuàng)建了一個(gè)視窗。

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

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

理論上，窗口也可以是接近無(wú)窮大的，你可以設(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è)是作用在無(wú)窮大的畫(huà)布上的，另一個(gè)是作用于固定窗口的。
SVG視窗

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

這里，我創(chuàng)建了一個(gè)600px寬，300px高的視窗。在視窗內(nèi)我創(chuàng)建了一個(gè)200x100px的紅色矩形。因?yàn)槲覜](méi)有指定單位，所以默認(rèn)情況下會(huì)使用像素作為單位。因?yàn)檫@和我平時(shí)的設(shè)置是一樣的，所以我傾向于不要指定單位，這樣也比較快捷。

為了能夠看到視窗的邊界，我還為<svg>元素添加了一個(gè)outline。這是代碼生成的結(jié)果。

你可以看到一個(gè)5px粗的棕色邊框包圍著一塊寬為600px、高為300px的區(qū)域。邊框內(nèi)的內(nèi)容就是視窗。

視窗內(nèi)獨(dú)立出來(lái)一個(gè)寬為200px、高為100px的紅色矩形。默認(rèn)情況下矩形的左上角是放在SVG畫(huà)布的原點(diǎn)，和視窗的原點(diǎn)對(duì)齊。

我有個(gè)問(wèn)題是，如果你沒(méi)有為視窗設(shè)置寬和高，它的尺寸應(yīng)該是怎樣的呢？我沒(méi)有找到明確的答案。這是由每個(gè)用戶代理程序（瀏覽器）決定的，但是好像一般默認(rèn)是300px和150px。但是，我不建議是視窗按照默認(rèn)的尺寸顯示，最好還是按你自己的需要來(lái)設(shè)置尺寸吧。
移動(dòng)畫(huà)布上的SVG元素

你可以通過(guò)給矩形設(shè)置x值和y值，改變它在SVG畫(huà)布上的位置。這里我把x值和y值都設(shè)置為10px，你可以看到矩形離開(kāi)了視窗左上角的位置。

用這種方法改變x和y坐標(biāo)的值，就相當(dāng)于移動(dòng)了SVG畫(huà)布上繪制的對(duì)象。畫(huà)布本身沒(méi)有移動(dòng)，視窗也沒(méi)有移動(dòng)。我只是在畫(huà)布上的另一個(gè)位置繪制了一個(gè)同樣的紅色矩形。

你也可以畫(huà)一個(gè)部分超出了視窗邊界的矩形。

在這里你可以看到，矩形的大部分都變成不可見(jiàn)的了，只有小部分仍然可以在窗口中看到。其實(shí)我只是把它移動(dòng)了幾個(gè)像素，所以理論上你可以在這個(gè)無(wú)窮大的畫(huà)布上的任何你喜歡的位置繪制矩形。

看到視窗外面的內(nèi)容

有一個(gè)東西我不常見(jiàn)人提到的是：為什么我們看不到視窗之外的內(nèi)容。因?yàn)镾VG元素有一個(gè)默認(rèn)值為hidden的overflow屬性，所以任何超出視窗的內(nèi)容都會(huì)被隱藏。

當(dāng)然，overflow屬性也可以設(shè)置為其它值，比如visible。

把overflow屬性的值改為visible，你可以看到SVG畫(huà)布上超出視窗的那幾部分內(nèi)容，包括畫(huà)布上那部分能出現(xiàn)在你屏幕上的內(nèi)容（你的瀏覽器創(chuàng)建的另一個(gè)視窗）。

現(xiàn)在你可以看到整個(gè)紅色矩形了，包括超出視窗邊界的部分。在使用SVG工作的時(shí)候你一般不會(huì)這么做，現(xiàn)在這只是一個(gè)幫助你理解到底發(fā)生了什么東西的方式。
建立一個(gè)新的視窗

前面我說(shuō)過(guò)有SVG是多個(gè)坐標(biāo)系是同時(shí)作用的。最簡(jiǎn)單的情況下，也有一個(gè)用于畫(huà)布，一個(gè)用于視窗的坐標(biāo)系。我也提到了你可以創(chuàng)建新的畫(huà)布，并建立新的窗口。

每次你新建SVG元素，即使是嵌套在另一個(gè)SVG元素內(nèi)，你會(huì)用它自己的坐標(biāo)系統(tǒng)創(chuàng)建新的畫(huà)布及視窗。只有較少數(shù)元素會(huì)創(chuàng)建新的畫(huà)布和視窗：

    <svg>元素
    實(shí)例化<use>元素時(shí)的<symbol>元素。
    引入SVG文件的<img>元素
    <foreignObject>元素

因?yàn)槲覀冞€沒(méi)有開(kāi)始討論這些元素（除了SVG元素），我現(xiàn)在只是把它們羅列出來(lái)。我現(xiàn)在主要是想強(qiáng)調(diào)在同一個(gè)HTML文件中創(chuàng)建多個(gè)SVG畫(huà)布和視窗。

最新評(píng)論