SVG Viewport和ViewBox

SVG圖像的視口(Viewport)和視圖框(ViewBox)可設(shè)置圖像可見部分的尺寸。

viewport和viewbox的區(qū)別

1、viewport 視口，相當(dāng)于顯示器屏幕。

2、viewbox 視區(qū)，相當(dāng)于在屏幕上截取一小塊，放大到整個(gè)屏幕，就是特寫的效果。

3、preserveAspectRatio 指定viewbox與viewport的對齊方式和縮放方式。

視口(Viewport)

視口(Viewport)是SVG圖像的可見區(qū)域。邏輯上，SVG圖像可以像您想要的一樣寬和高，但是一次只能看到圖像的特定部分。可見區(qū)域稱為視口(Viewport)。

您可以使用元素的width和height屬性來指定視口(Viewport)的大小<svg>。這是一個(gè)示例：

<svg width="500" height="300"></svg>

本示例定義的視口(Viewport)為500單位寬和300單位高。

坐標(biāo)系統(tǒng)單位

如果您在width和height 屬性內(nèi)未指定任何單位，則假定單位為像素。即，width500表示500像素。

如果您喜歡使用不同于像素的單位，則可以。以下是可以與<svg>元素一起使用的單位的列表：

您在<svg>元素上設(shè)置的單位僅影響<svg> 元素（視口(Viewport)）的大小。SVG圖像中顯示的SVG形狀的大小由您在每種形狀上設(shè)置的單位決定。如果未指定單位，則單位將默認(rèn)為像素。

這是一個(gè)示例，該示例顯示<svg>具有一組單位的元素，其中包含具有自己單位集的形狀：

<svg width="10cm" height="10cm">

    <rect x="50" y="100" width="50" height="50"
          style="stroke: #000000; fill: none;"/>

    <rect x="100" y="100" width="50mm" height="50mm"
          style="stroke: #000000; fill: none;" />

</svg>

該<svg>圖像有它的單位設(shè)定cm。這兩個(gè)<rect> 元素都有自己的單位集。一個(gè)用途像素（沒有單位明確設(shè)置）和其他用途mm 的width和height。

這是生成的圖像。請注意，右邊的框（中的width和height 單位mm）比左邊的框大。

視圖框(ViewBox)

您可以重新定義<svg>元素內(nèi)沒有單位的坐標(biāo)的含義。您可以使用viewBox屬性來執(zhí)行此操作。這是一個(gè)示例：

<svg width="500" height="200" viewBox="0 0 50 20" >

    <rect x="20" y="10" width="10" height="5"
          style="stroke: #000000; fill:none;"/>

</svg>

本示例創(chuàng)建<svg>一個(gè)寬度為500像素，高度為200 的元素。的viewBox屬性<svg>包含四個(gè)坐標(biāo)。這些坐標(biāo)定義了<svg>元素的視圖框(ViewBox)。坐標(biāo)是x y width height視圖框(ViewBox)的坐標(biāo)。

在這種情況下，視圖框(ViewBox)從處開始0,0并且50寬而20高。也就是說，500 x 200像素<svg>元素在內(nèi)部使用從0,0 到的坐標(biāo)系50,20。換句話說，用于內(nèi)部形狀的坐標(biāo)中的每1個(gè)單位<svg>對應(yīng)于寬度500/50 = 10像素，高度對應(yīng)200/20 = 10像素。這就是為什么x位置為20，y位置為10的矩形真正位于的原因200,100，并且其寬度（10）和高度（5）分別對應(yīng)于100個(gè)像素和50個(gè)像素。

另一種解釋方法是，viewBox屬性中<svg>的前兩個(gè)坐標(biāo)定義元素左上角的用戶坐標(biāo)，后兩個(gè)坐標(biāo)定義右下角的用戶坐標(biāo)。內(nèi)的空間 <svg>被解釋為從視圖框(ViewBox)的左上坐標(biāo)到右下坐標(biāo)。

運(yùn)行后圖像效果：

請注意，<rect>元素內(nèi)部的所有坐標(biāo)如何解釋為1個(gè)單位的10個(gè)像素。

保持寬高比

如果視口(Viewport)和視圖框(ViewBox)的縱橫比（寬高比）不同，則需要指定SVG查看器（例如瀏覽器）如何顯示SVG圖像。您可以使用元素的preserveAspectRatio屬性來執(zhí)行此操作<svg<。

該preserveAspectRatio屬性采用以空格分隔的兩個(gè)值。第一個(gè)值告訴視圖框(ViewBox)如何在視口(Viewport)內(nèi)對齊。此值本身由兩部分組成。第二個(gè)值指示如何保留寬高比（如果有的話）。

指定對齊方式的第一個(gè)值由兩部分組成。第一部分指定x對齊方式，第二部分指定y對齊方式。這是x和y對齊值的列表：

通過將y部件附加在x部件之后，可以將x部件和y部件組合為一個(gè)值。這是兩個(gè)示例：

xMaxYMax

xMidYMid

這兩個(gè)示例使視圖框(ViewBox)與視口(Viewport)的對齊方式不同。第一個(gè)示例將視框的右邊緣與視口(Viewport)的右邊緣對齊。第二個(gè)示例將視框的中間與視口(Viewport)的中間對齊。

preserveAspectRatio屬性值 的第二部分可以采用三個(gè)不同的值：

preserveAspectRatio屬性值 的第二部分附加到第一部分，并用空格分隔。這是兩個(gè)示例：

preserveAspectRatio="xMidYMid meet"

preserveAspectRatio="xMinYMin slice"

我還沒有真正討論過各種preserveAspectRatio設(shè)置的效果，所以讓我們來看一下。

以下示例均將width設(shè)置為500，height將其設(shè)置為75，將viewBox屬性設(shè)置為0 0 250 75。這意味著沿著x軸，每個(gè)坐標(biāo)單元將對應(yīng)于2個(gè)像素，但是沿著y軸，每個(gè)坐標(biāo)單元將僅對應(yīng)于1個(gè)像素。如您所見，沿x軸的縱橫比為500/250 = 2，沿y軸的縱橫比為75/75 = 1。這可能會(huì)導(dǎo)致圖像失真，但是在以下示例中，我們將看到各種preserveAspectRatio設(shè)置如何處理這些設(shè)置。

這是第一個(gè)preserveAspectRatio設(shè)置為的示例xMinYMin meet。這樣可以確保保持寬高比，并調(diào)整視圖框(ViewBox)的大小以適合視口(Viewport)。即，根據(jù)兩個(gè)縱橫比（y軸的比例為1）中的較小者縮放視圖框(ViewBox)。由于xMinYMin 零件的原因，視圖框(ViewBox)將位于視口(Viewport)的左上角。這是代碼和生成的圖像：

<svg width="500" height="75" viewBox="0 0 250 75"     preserveAspectRatio="xMinYMin meet"
     style="border: 1px solid #cccccc;">

    <rect x="1" y="1" width="50" height="50"
          style="stroke: #000000; fill:none;"/>

</svg>

第二個(gè)示例已preserveAspectRatio設(shè)置為xMinYMin slice。這樣可以保留寬高比，但是會(huì)根據(jù)較大的寬高比（x軸的比例為2）縮放視圖框(ViewBox)，從而導(dǎo)致圖像太大而無法容納在視口(Viewport)中。圖像被稱為“切片”。

<svg width="500" height="75" viewBox="0 0 250 75"     preserveAspectRatio="xMinYMin slice"
     style="border: 1px solid #cccccc;">

    <rect x="1" y="1" width="50" height="50"
          style="stroke: #000000; fill:none;"/>

</svg>

第三個(gè)示例preserveAspectRatio設(shè)置為none。這意味著視圖框(ViewBox)將填充整個(gè)視口(Viewport)，從而使圖像失真，因?yàn)檠豿軸和y軸的寬高比不相同。

<svg width="500" height="75" viewBox="0 0 250 75"      preserveAspectRatio="none"
      style="border: 1px solid #cccccc;">

     <rect x="1" y="1" width="50" height="50"
           style="stroke: #000000; fill:none;"/>

</svg>

視圖框(ViewBox)對齊

到目前為止顯示的所有示例都使用了該xMinYMin設(shè)置。根據(jù)您要如何在視口(Viewport)中對齊視圖框(ViewBox)，可以使用其他設(shè)置。我將更深入地了解這些設(shè)置的工作方式，但讓我們首先來看一個(gè)示例：

<svg width="500" height="100" viewBox="0 0 50 50"    
preserveAspectRatio="xMinYMin meet"    
style="border: 1px solid #cccccc;">    
<circle cx="25" cy="25" r="25"    
style="stroke: #000000; fill:none;"/>    
</svg>    
<svg width="500" height="100" viewBox="0 0 50 50"    
preserveAspectRatio="xMidYMin meet"    
style="border: 1px solid #cccccc;">    
<circle cx="25" cy="25" r="25"    
style="stroke: #000000; fill:none;"/>    
</svg>    
<svg width="500" height="100" viewBox="0 0 50 50"    
preserveAspectRatio="xMaxYMin meet"    
style="border: 1px solid #cccccc;">    
<circle cx="25" cy="25" r="25"    
style="stroke: #000000; fill:none;"/>    
</svg>

這個(gè)示例中示出了一個(gè)<svg>與元件width 組500和height設(shè)置為100。viewBox設(shè)為 0 0 50 50。這將導(dǎo)致x軸長寬比為500/50 = 10，y軸長寬比為100/50 =2。圖像中的圓的半徑為25，使其寬50度寬，高50個(gè)單位。因此，它會(huì)填充整個(gè)視圖框(ViewBox)（而不是視口(Viewport)）。

使用說明meet符時(shí)，視圖框(ViewBox)將根據(jù)y軸縮放，因?yàn)樗目v橫比較小。這意味著，視圖框(ViewBox)將沿y軸（垂直）填充整個(gè)視口(Viewport)，但僅沿x軸（水平）填充2 * 50像素= 100像素（縱橫比*視圖框(ViewBox)X尺寸） 。由于視口(Viewport)的寬度為500像素，因此您必須指定如何在視口(Viewport)內(nèi)水平對齊視圖框(ViewBox)。這樣做使用xMin， xMid并xMax在第一部分的子部分preserveAspectRatio 的屬性值。

這里有三個(gè)圖像表示使用上面的示例中xMinYMin meet，xMidYmin meet 和xMaxYmin meet在preserveAspectRatio屬性。請注意，視框如何將其與左側(cè)，中央和右側(cè)對齊（取決于設(shè)置）。

同樣，如果圖像沿x軸的縱橫比小于y軸，則必須指定其y對齊。

這是以前的示例，但現(xiàn)在具有width100和height200：

視圖框(ViewBox)的大小相同，因此使沿y軸的長寬比（200/50 = 4）大于沿x軸的長寬比（100/50 = 2）。因此，視圖框(ViewBox)將在x軸方向而非y軸方向填充視口(Viewport)。這使得必須為視圖框(ViewBox)指定y對齊。

<svg width="100" height="200" viewbox="0 0 50 50" preserveaspectratio="xMinYMin meet" style="border: 1px solid #cccccc;">
    <circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewbox="0 0 50 50" preserveaspectratio="xMinYMid meet" style="border: 1px solid #cccccc;">
    <circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewbox="0 0 50 50" preserveaspectratio="xMinYMax meet" style="border: 1px solid #cccccc;">
    <circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>

這是三張圖片，每張圖片都顯示了使用子部分值的一種可能的y對齊YMin， YMid以及YMax：