Geek Answers Handbook

How to remove the space between <svg> and <td> in HTML5?

I use the code below so that SVG is embedded in HTML5. The only problem that I can’t solve is that there is a lot of space between <svg>and <td>when the HTML file is viewed in the browser. Can someone tell me how to remove the space?

Thank you in advance!

More details:

Sorry, I forgot to say which browser I use. I find that when I use IE9, there is a lot of space between the SVG and the left and right lanes. However, when I use Chrome, there is a lot of space between the SVG and the top and bottom panels. This is pretty weird.

I am editing the code below. I add svg {margin-top: 0px; edge bottom: 0px; Margin to the right: 0px; Stock left: 0px; background color: yellow;}

in code. I want to remove the yellow space. Now the question is becoming more specific.

<!DOCTYPE html><html>
<head>

<title>SarShips: scs</title>
<style type="text/css">

table 
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}

table {margin-left:auto;margin-right:auto}
tr.odd {background-color:#E0E0F0}
tr.even {background-color:#F0F0FF}
th {font:22px sans-serif;background-color:#98AFC7;color:white;padding:6px}
td.e {font:bold 15px serif;text-align:right;padding:4px}
td.v {font:15px monospace;text-align:left;padding:4px}
td.i {padding:4px}
p {text-align:center}
      svg {margin-top:0px;
           margin-bottom:0px;
           margin-right:0px;
           margin-left:0px;background-color:yellow;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Parameters</th><th>Imagette</th><th>Profile</th><th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td>

</td><td class="i"></td>

<td class="i">
<svg width="100%" height="100%" viewBox="0 0 400 400" >
<g>
<rect width="400" height="400" style="stroke-width:1;          stroke:rgb(0,0,0)"></rect>
<circle cx="200" cy="200" r="200" stroke="green" stroke-width="2"></circle>
<circle cx="200" cy="200" r="160" stroke="green" stroke-width="2"></circle>
<circle cx="200" cy="200" r="120" stroke="green" stroke-width="2"></circle>
<circle cx="200" cy="200" r="80" stroke="green" stroke-width="2"></circle>
<circle cx="200" cy="200" r="40" stroke="green" stroke-width="2"></circle>
<path d="M250 150 L150 350 L350 350 Z" style="fill:rgb(0,0,255);stroke-width:1;          stroke:rgb(0,0,0)"></path>
<path d="M200,200 L200,0 A200 200 0 0 1 200 400 Z" style="fill:green;stroke:green;stroke-width:5;          fill-opacity:0.5;stroke-opacity:0.9"></path>
<path d="M150 250 S150 150 170 170 L220 150Z" style="fill:pink;stroke:blue;stroke-width:1;          fill-opacity:0.9;stroke-opacity:0.9"></path>
</g>
</svg>
</td><td></td>
</tr>

</tbody>
</table>
</body>
</html>
+5
source share
4 answers

SVG is built inside a table cell, so try to add display:blockin svgand the width / height to <td>to SVG knew what to expect interest rates.

+23
source

I change

svg {margin-top: 0px;
edge bottom: 0px;
Margin to the right: 0px;
Stock left: 0px; background color: yellow;}

to be

svg {margin-top: 0px;
edge bottom: 0px;
Margin to the right: -150px;
Stock left: 0px; background color: yellow;}

Then the yellow space disappears in IE9. This solution does not work in Chrome ...

+2
source

, SVG-, 4px, . , . "" , :

td.i {padding:4px;line-height:0px;}
+1

SVG webkit 350px 150px.

, , : http://henkelmann.eu/2010/12/16/display_svg_image_same_size_in_decent_browsers

So the problem is that you need to either set the hard pixel size for your svg, or set the hard size of your container. I have not found a way to enable dynamic scaling (unless you do this in javascript, the solution of which can be found in the comments here: How to scale the stubborn SVG embedded in the <object> tag? ).

+1
source

More articles: