表格中的 SVG - Chrome、Firefox、IE答案

【问题标题】：SVG in table - Chrome, Firefox, IE表格中的 SVG - Chrome、Firefox、IE
【发布时间】：2014-02-05 23:00:02
【问题描述】：

我有以下 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 图像在所有三种浏览器中一致显示？

【问题讨论】：

标签： html css svg cross-browser

【解决方案1】：

给<svg>元素匹配height和width属性，如：

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

【讨论】：

这回答了#3。对#1 和#2 有任何想法吗？
此外，虽然它确实有效，但对于很多 svg 图像来说，这变得非常乏味。特别是因为嵌入式 svg 的尺寸不容易找到。
不幸的是，事情就是这样。您需要指定视口的大小以及 svg 中所有形状和路径的大小和原点。浏览器显示不同的原因是 svg 元素的默认大小不同。