表中的SVG - Chrome，Firefox，IE

时间：2014-02-05 14:51:07

标签： html css svg cross-browser

我有以下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

IE9

注意原因不明的空格导致td展开而不是紧紧包裹svg

火狐

Firefox

td仍然有一个无法解释的高度（如IE），但宽度为0，从而使svg溢出

铬

Chrome

这个似乎是最糟糕的。这次表中的svg甚至都没有显示出来！

所以问题是：

  1. 这些都是正确的。我希望该表完全（显示和）包含并紧紧包裹svg。
  2. 为什么Chrome甚至不在表格中显示svg？
  3. 是否有解决方法可以让表格中的svg张图片在所有三种浏览器中一致显示？

1 个答案:

答案 0 :(得分：2)

将<svg>元素与height和width属性相匹配，例如：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="50">
相关问题
最新问题