Home/ Questions/Q 8555991
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T15:14:58+00:00

When I embed SVG (inlined XML) in a table cell, no matter what I

  • 0

When I embed SVG (inlined XML) in a table cell, no matter what I try, the overflowing parts of the SVG image are hidden. I want to have SVG in multiple cells and use transparent backgrounds to achieve something like this, where the graphics cross multiple cells.

example

A tabular presentation is most appropriate here: other data, not shown, will be in other columns.

Starting point 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    try to give the svgs an absolute position and the cell a relative position and overflow: visible

    • 0