表格中的SVG-Chrome，Firefox，IE
[英]SVG in table - Chrome, Firefox, IE
问题描述
I have the following HTML document: 
我有以下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>
I rendered it in IE9, Firefox and Chrome (both the latest as of this writing). 我在IE9，Firefox和Chrome（均为撰写本文时的最新版本）中进行渲染。 Non of them seem to get it right, and they all produce different output. 他们似乎都不正确，他们都会产生不同的输出。
Here are the results: 结果如下：
IE9 IE9
Notice the unexplained blank space causing the td to expand instead of wrapping the svg tightly 注意无法解释的空白导致td扩展，而不是紧紧包裹svg
Firefox 火狐
The td still has an unexplained height (like IE), but a width of 0, thus leaving the svg to overflow td仍然具有无法解释的高度（如IE），但宽度为0，因此svg会溢出
Chrome 铬
This one seems the worst. 这似乎是最糟糕的。 The svg in the table is not even displayed this time! 表格中的svg这次甚至都没有显示！
So the questions are: 所以问题是：
- Are any of these right. 有这些权利吗？ I would expect the table to fully (display and) contain and tightly wrap the
svg.我希望表格完全（显示和）包含并紧密包装svg。 - Why isn't Chrome even displaying the
svgin the table?为什么Chrome甚至没有在表格中显示svg？ - Is there a workaround to get
svgimages in tables to display consistently across all three browsers?是否有一种变通办法来使表中的svg图像在所有三个浏览器中一致显示？
1 个解决方案
解决方案1
2 2014-02-05 14:59:48
提供<svg>元素匹配的height和width属性，例如：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="50">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.