表格中的SVG-Chrome，Firefox，IE

Question

我有以下HTML文檔：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <table border="1">
        <tbody>
            <tr>
                <td>
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                        <rect width="100" height="50" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
                    </svg>
                </td>
            </tr>
        </tbody>
    </table>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="100" height="50" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
    </svg>
</body>
</html>

我在IE9，Firefox和Chrome（均為撰寫本文時的最新版本）中進行渲染。 他們似乎都不正確，他們都會產生不同的輸出。

結果如下：

IE9

注意無法解釋的空白導致td擴展，而不是緊緊包裹svg

火狐

td仍然具有無法解釋的高度（如IE），但寬度為0，因此svg會溢出

鉻

這似乎是最糟糕的。 表格中的svg這次甚至都沒有顯示！

所以問題是：

有這些權利嗎？ 我希望表格完全（顯示和）包含並緊密包裝svg 。
為什么Chrome甚至沒有在表格中顯示svg ？
是否有一種變通辦法來使表中的svg圖像在所有三個瀏覽器中一致顯示？

Answer 1

提供<svg>元素匹配的height和width屬性，例如：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="50">

表格中的SVG-Chrome，Firefox，IE

問題描述

IE9

火狐

鉻

1 個解決方案

解決方案1
2 2014-02-05 14:59:48

表格中的SVG-Chrome，Firefox，IE

問題描述

IE9

火狐

鉻

1 個解決方案

解決方案1 2 2014-02-05 14:59:48

解決方案1
2 2014-02-05 14:59:48