svg的座標系統

時間 2019-12-07

標籤 svg 座標系統简体版

原文原文鏈接

最近作一個流程圖繪製項目，因此研究了一下svg。發現svg目前瀏覽器支持的挺強大的，可是svg自己有不少背景知識和元素屬性以及js庫等，如何系統地掌握這一強大工具呢？css

viewPort(視窗)和viewBox(視野)

這兩個詞的翻譯仍是比較好的！你站在屋子裏經過窗戶來看外面的世界。窗戶的大小是固定的，好比是400*200,可外面的世界是無限大的！那是否是你就只能看到窗戶大小般的世界和井底之蛙通常呢？若是真是這樣，那viewBox就沒用了。想一想看，若是你裏窗戶越遠，是否是看到的越多呢？當你和窗戶津貼成二維平面時，就真的是井底之蛙了。因此viewBox就頗有意義了！html

<svg width="400" height="200" viewBox="0 0 200 50"  preserveAspectRatio='xMidYMin' style="border:1px solid greenyellow">
        <rect fill="#00ff00" width='100' height="100" x="0" y="0"></rect>
    </svg>

svg是html標籤，相似於canvas，表明上面所說的viewPort.這裏瀏覽器會渲染一塊400*200的空白區域（窗戶）。canvas
咱們發現上面的寬高屬性沒有單位，因此默認是px.因此咱們應該看到的是一塊100px*100px的綠色正方形瀏覽器

可是結果不是咱們想要的svg

首先html width,height屬性若是沒有單位就是px,svg是400*200，沒有問題。工具
可是裏面的rect明明是100*100怎麼就變成了200*200spa

結論翻譯

svg標籤包裹的世界（表明是viewBox viewBox="0 0 200 50"）和外部html（表明是viewPort width="400" height="200" ）的世界不是一體的。3d
若是上面的svg元素沒有viewBox和preserveAspectRatio屬性，那viewPort和viewBox的單位像素是1：1的，咱們經過改變viewBox屬性，改變兩個世界的單位像素比例.code

兩個世界(viewPort和viewBox)的單位像素

怎麼理解兩個世界

demo: 1.html

<body>
    <div>
        <svg width='200px' height="200px">
            <polygon id='star' points='100,0 0,100 100,200 200,100' fill="none" stroke='black'/>
        </polygon>
            </polygon>
        </svg>
    </div>
</body>
</html>

上面是HTML的世界，在這個世界裏，咱們能夠經過使用css改變和定位svg(viewPort)，這裏viewPort就定義成了300*300,表明着svg在HTML世界中只能佔據300*300的空間。
難道我在svg中畫圖只能畫限制在300*300空間的圖嗎？不可能，事實上我能夠畫無窮大，上面的polygon能夠設置成更大。這個無窮大的空間就是svg世界
若是這樣的話，由於默認兩個世界的比例是1：1，因此你會看不到全部部分。

<polygon id='star' points='100,0 0,200 100,400 200,200' fill="none" stroke='black'/>

preserveAspectRatio屬性

ViewBox屬性和preserveAspectRatio屬性配合使用。

viewBox

<svg width='200px' height="200px" viewBox="0 0 400 400">
        <!-- <polygon id='star' points='100,0 0,100 100,200 200,100' fill="none" stroke='black'/> -->
        <polygon id='star' points='100,0 0,200 100,400 200,200' fill="none" stroke='black'/>
        <text x='60' y='160' style="font-size:16">svg:200*200</text>
    </svg>

若是viewBox width和height等比例縮放的話，這個圖形會相應縮放。