SVG in table - Chrome, Firefox, IE
Question
I have the following HTML document:
<!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). Non of them seem to get it right, and they all produce different output.
Here are the results:
IE9
Notice the unexplained blank space causing the td to expand instead of wrapping the svg tightly
Firefox
The td still has an unexplained height (like IE), but a width of 0, thus leaving the svg to overflow
Chrome
This one seems the worst. The svg in the table is not even displayed this time!
So the questions are:
- Are any of these right. I would expect the table to fully (display and) contain and tightly wrap the
svg. - Why isn't Chrome even displaying the
svgin the table? - Is there a workaround to get
svgimages in tables to display consistently across all three browsers?
1 answers
solution1
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">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.