SVG標籤佔用額外空間

所以我在HTML5中遇到了SVG元素的奇怪大小問題。它比我懷疑的要佔用更多的空間。圖像中的每個小矩形都是一個寬度和高度均爲「20」的矩形元素。SVG標籤佔用額外空間

SVG元素的高度和寬度應該爲20 * 10 = 200，而尺寸爲680x508。

你可以在這裏查看檢查SVG元素 - >http://i.stack.imgur.com/xrofn.png

的HTML看起來是這樣的：

<svg> 
    <rect x='0' y='0' height='20' width='20' stroke='black' stroke-width=''/> 
    <rect x='0' y='20' height='20' width='20' stroke='black' stroke-width=''/> 
    <rect x='0' y='40' height='20' width='20' stroke='black' stroke-width=''/> 
    ... 
    </svg>

應當指出的是，我正在運行的node.js和mustache.js。

編輯：很顯然，當SVG不確定寬度/高度時會做些什麼。手動設置可解決問題。

<svg height="200" width="200">

來源

2012-11-03 Kristjan Oddsson

SVG視口似乎是由父元素決定的。

http://www.w3.org/TR/SVG/coords.html指出

的SVG用戶代理與其父用戶代理確定到其中的SVG用戶代理可以使文檔視協商..

您可以指定大小使用widht和height的SVG視口

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"> 
    <rect x='0' y='0' height='20' width='20' stroke='black' stroke-width=''/> 
    <rect x='0' y='20' height='20' width='20' stroke='black' stroke-width=''/> 
    <rect x='0' y='40' height='20' width='20' stroke='black' stroke-width=''/> 
    ... 
</svg>

來源

2012-11-03 16:11:56

width和height屬性的默認值在< svg>元素是100％，這意味着SVG視口取決於它所在的容器。通常這是由CSS決定的。

如果需要，您可以設置寬度和高度屬性，但也可以只使用CSS，如this example。

來源

2012-11-09 09:36:37

SVG標籤佔用額外空間

回答

相關問題