嵌入在HTML表格单元格中的SVG可以溢出该单元格吗?

pap*_*jam 2 html svg html-table overflow

当我在表格单元格中嵌入SVG(内联XML)时,无论我尝试什么,都会隐藏SVG图像的溢出部分.我想在多个单元格中使用SVG并使用透明背景来实现这样的图形,其中图形跨越多个单元格.

例

表格式表示在这里是最合适的:其他数据(未显示)将在其他列中.

起点jsfiddle:http://jsfiddle.net/ApWTS/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
<table>
<tr>
<td style="width:200px;height:100px;background-color: red;">top cell</td>
</tr>
<tr>
<td style="width:200px;height:100px;background-color: yellow;overflow:visible;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="80" stroke="black" stroke-width="2" fill="red"/>
</svg>
</td>
</tr>
<tr>
<td style="width:200px;height:100px;background-color: green;">bottom cell</td>
</tr>
</table>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Has*_*lly 5

尝试给svgs一个absolute position和一个单元格a relative positionoverflow: visible