SVG元素似乎有任意高度

我一直在嘗試學習一些SVG。但瀏覽器似乎陷入了一個正確的老混淆渲染。SVG元素似乎有任意高度

看看下面的HTML：

<html> 
    <head></head> 
    <body> 
    <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"> 
     <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
    </svg> 
    <p>Hello? Hellooooooooooooo?</p> 
    </body> 
</html>

認爲這是任何現代的瀏覽器，你會看到矩形和下面的HTML段落之間的空白任意數量。（IE9不會顯示任何內容，但沒有人會對此感到驚訝。）

Firefox（Firebug）不給出svg或rect元素的高度。它只是勉強說'自動'。

Opera說svg的高度爲150px，並且說'自動'爲rect。

鉻芒並給予兩者的高度。對於rect（顯然包括中風）爲102px，對於svg爲428px。

我的期望是，svg元素將是一個'瘦'容器（即不增加任何內容的維度），因此有一個102px的高度。

任何人都知道正確的行爲應該是什麼，以及我可能會如何解決這個問題？

來源

2012-01-01 David

downvoter能解釋自己嗎？ – David 2012-01-04 10:09:37

啊。 2降壓。沒有解釋或建議。巨魔？ – David 2013-03-04 17:25:47

您尚未明確定義SVG的寬度或高度，或放置矩形的位置，甚至SVG的哪一部分感興趣。瀏覽器以不同方式處理事情並不奇怪。

嘗試限定寬度和高度：

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="102px" height="102px"> 
    <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
</svg>

可替換地，限定viewBox：

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 102 102"> 
    <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
</svg>

或兩項：

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 52 52" width="102px" height="102px"> 
    <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
</svg>

Here are some examples in action。

來源

2012-01-01 23:35:04 robertc

謝謝羅伯特。那麼爲了給它一個寬度和高度，我必須自己計算'svg'元素內的圖紙的尺寸嗎？我認爲它將圍繞其內容進行調整，就像'div'一樣。 – David 2012-01-02 10:50:08

感謝您的jsfiddle鏈接。這是原型有用的答案。 – David 2012-01-02 10:51:53

@David由於「內容」是無限的平面，它不會圍繞內容大小;） – robertc 2012-01-02 11:36:04

SVG元素似乎有任意高度

回答

相關問題