2. svg學習筆記-svg中的座標系統和viewbox

時間 2019-11-17

標籤 svg 學習筆記座標系統 viewbox 简体版

原文原文鏈接

我是經過《SVG精髓》這本書學習的svg，說實話，這本書寫的很差，或者說翻譯的很差，我沒有看過這本書的原版，不知道原文寫的怎麼樣，可是翻譯出來的有些句子真的很拗口。之前老師給咱們API文檔的時候一直是英文的，咱們問他爲何不給中文版的，英文版的看起來費勁，老師說原版的大家能看懂，翻譯過來就看不懂了，如今是深有領會啊\(^o^)/~html

廢話說完，來看正事，svg的座標系統和大多數繪圖的座標系統同樣，左上角爲原點，從左向右x軸遞增，從上到下y軸遞增。這本沒什麼好說的，你們都知道，可是奇葩的是<svg>元素有個屬性叫viewbox就比較扯淡了，要是本身研究這個東西真還有點兒費勁，下面開始詳談~~~svg

看一個例子，編寫以下的svg：字體

<svg width="200" height="200" style="border:1px solid #000000">
    <rect x="10" y="10" width="100" height="100" style="stroke:blue; fill:blue">
    </rect>
</svg>

在網頁上會呈現以下效果：spa

解釋下上面的代碼，設置<svg>元素的寬和高都爲200像素，在網頁上就表現爲這個svg圖像佔據網頁空間的寬200px高200px，再設置樣式：邊框樣式爲1像素黑色實線，<rect>元素嵌套在<svg>元素中，代表svg中繪製一個矩形，設置rect元素的x爲10，y爲10，表示要繪製的矩形的左上角頂點的座標爲(10，10)，設置width爲100，height爲100，表示矩形的寬高都是100像素，再設置邊框和填充顏色都是藍色。翻譯

再來講一下這個viewbox屬性，設置這個屬性至關於給svg圖像設置了一個選區，而後將這個選區填充到整個svg畫布中，最後的你看到的結果就是選區中的圖像放大或縮小的結果。這個屬性有四個值，分別爲座標系統中的x值，y值，寬度，高度，屬性值之間用空格或者是逗號合開。實際上這4個值惟一的肯定了一個矩形和矩形的位置，x值和y值是矩形左上角頂點的座標，寬和高分別是矩形的寬和高，單位爲像素，這個矩形就是上述的選區。口說無憑，上實例，編寫如下的代碼：3d

<!DOCTYPE html>
<html>
<head>
    <title>svg</title>
</head>
<body>
    <svg width="300" height="300" viewbox="0 0 300 300" style="border:1px solid #000000">
        <rect x="10" y="0" width="1" height="1" style="stroke:blue; fill:blue">
        </rect>

        <rect x="10" y="10" width="1px" height="1px" style="stroke:blue; fill:blue">
        </rect>

        <rect x="10" y="20" width="1mm" height="1mm" style="stroke:blue; fill:blue">
        </rect>

        <rect x="10" y="30" width="1cm" height="1cm" style="stroke:blue; fill:blue">
        </rect>
    </svg>
    <svg width="300" height="300" style="border:1px solid #000000">
        <rect x="10" y="0" width="1" height="1" style="stroke:blue; fill:blue">
        </rect>

        <rect x="10" y="10" width="1px" height="1px" style="stroke:blue; fill:blue">
        </rect>

        <rect x="10" y="20" width="1mm" height="1mm" style="stroke:blue; fill:blue">
        </rect>

        <rect x="10" y="30" width="1cm" height="1cm" style="stroke:blue; fill:blue">
        </rect>
    </svg>
</body>
</html>

在網頁中呈現以下結果：code

以上代碼爲第一個svg設置了viewbox屬性，可是結果並無不一樣，這是由於我將第一個svg的viewbox屬性設置爲了"0 0 300 300"，這表示選區是整個svg圖像，因此並無變化，將上述代碼中的第一個svg中的viewbox屬性設置爲"0 0 150 150"，結果以下：htm

很明顯第一個圖像中的每一個矩形的長寬均是第二個圖像的兩倍，不信你能夠把圖片保存下來用ps測一下。出現這樣的緣由是我將第一個圖像的選區設置爲寬高均爲150像素，左上角頂點爲座標原點的矩形，此矩形正好是圖像的二分之一，經放大後填充在300×300的圖像中，因此圖像放大了二倍。再將上述代碼中的第一個svg中的viewbox屬性設置爲"0 0 100 100"，結果以下：blog

如你所料，第一個圖像中的每一個矩形的長寬均是第二個圖像的三倍，好了，吹牛完畢O(∩_∩)O哈哈~