表格中的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