瞭解svg的viewbox屬性

我想使用在here之前創建的土耳其地圖。瞭解svg的viewbox屬性

當我改變視框值

viewBox="0 0 200 200"

地圖被在較小的尺寸再現我已經改變svg元素

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" 
    width="800" 
    height="600" 
    style="shape-rendering:geometricPrecision; 
      text-rendering:geometricPrecision; 
      image-rendering:optimizeQuality; 
      fill-rule:evenodd; 
      clip-rule:evenodd" 
    viewBox="0 0 180 180">

的尺寸。

如果我將值設置爲「0 0 10 10」，則不顯示圖像。

如果我設置的值，以「0 0 50 50」巨大的圖像仍四溢的頁面

如果我設置爲「0 0 100 100」的形象是好的價值觀。

但我不明白它是如何工作的。

來源

2014-09-05 zkanoca

[** CSS-技巧SVG條**]（http://css-tricks.com/mega-list-svg-信息/） – 2014-09-05 10:01:40

具有寬度和高度值的Viewbox是如何執行縮放和使用SVG平移的。

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" 
    width="800" 
    height="600" 
    viewBox="0 0 800 600">

在視框縮放無800個像素的寬度將等於屏

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" 
    width="800" 
    height="600" 
    viewBox="0 0 1600 1200">

一切都按比例縮小上800像素的寬度，使得一個行寬1600個像素僅顯示爲800個像素寬。

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" 
    width="800" 
    height="600" 
    viewBox="400 300 400 300">

放大到由600屏幕建立該部分填充整個SVG 800的底部右手四分之一，不顯示上述的300條像素線或400條像素線的左側任何東西。

來源

2014-09-05 10:03:16 Wayne

的SVG畫布基本上是一個無盡的平原，在那裏你可以把你所有的對象。

的width和height定義爲顯示在瀏覽器中圖像的大小。這與您可以在HTML中包含的任何其他圖像非常相似。

另一方面，與viewBox屬性，您選擇該平原的部分，您當前要查看。

因此與"0 0 10 10"值你顯示圖像的左上點設置爲點0/0並從中選擇10個單位，爲您的圖像右側和底部。在你的例子中，在10個10倍單位的區域中，沒有任何東西，因此你看到的只是一個透明區域，你認爲這個區域「沒有被顯示」。

值爲"0 0 50 50"所示區域變大，您將開始看到圖片的左上角。地圖的第一部分變得可見。

最後與"0 0 100 100"你可以看到幾乎一半的上圖。

您使用viewBox選擇的區域縮放到SVG元素的height和width。兩者結合後，您可以啓用像放大到SVG的東西。您可以使用屬性preserveAspectRatio來控制縮放比例。

您可以在SVG文件的底部添加以下代碼，看到了顯示框（請務必設置viewBox="0 0 180 180"前）：

<rect x="0" y="0" width="100" height="100" style="stroke: blue; stroke-width: 1; fill: white; opacity: 0.8" /> 
<rect x="0" y="0" width="50" height="50" style="stroke: green; stroke-width: 1; fill: none;" /> 
<rect x="0" y="0" width="10" height="10" style="stroke: red; stroke-width: 1; fill: none;" /> 

<text x="5" y="97" style="fill: blue; font-size: 5px;">100x100</text> 
<text x="5" y="47" style="fill: green; font-size: 5px;">50x50</text> 
<text x="5" y="15" style="fill: red; font-size: 5px;">10x10</text>

因此得出結論的viewBox目的是選擇無盡的SVG平面的那部分，應該實際渲染。如果你在這裏選擇了錯誤的值，你可能會看到一個空的空間。

鏈接：

來源

2014-09-05 10:03:32 Sirko

瞭解svg的viewbox屬性

回答

相關問題