如何删除< svg>之间的空格和< td>在HTML5？ [英] How to remove the space between the <svg> and the <td> in HTML5?
问题描述
我使用下面的代码在HTML5中嵌入SVG。现在我唯一无法解决的问题是< svg> 和< td> 在浏览器中查看HTML文件时。有人能告诉我如何删除这个空间吗？
I use the code below to have SVG embedded in HTML5. The only problem now I cannot solve is that there is much space between the <svg> and the <td> when the HTML file is viewed in a browser. Can someone tell me how to remove the space?
提前谢谢你！
更多细节：
抱歉，我忘了说我使用的浏览器。我发现当我使用IE9时，SVG与左右栏之间有很大的空间。但是，当我使用Chrome时，SVG与顶部和底部栏之间有很大的空间。这很奇怪。
Sorry, I forgot to say which browser I use. I find that when I use IE9, there is much space between the SVG and the left and right bar. However, when I use Chrome, there is much space between the SVG and the top and bottom bar. It is quite strange.
我编辑下面的代码。我添加
svg {margin-top：0px;
margin-bottom：0px;
margin-right：0px;代码中
margin-left：0px; background-color：yellow;}
I edit the code below. I add svg {margin-top:0px; margin-bottom:0px; margin-right:0px; margin-left:0px;background-color:yellow;}
。我想要做的是删除黄色空间。现在问题变得更具体了。
in the code. What I want to do is to remove the yellow space. Now the question becomes 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>
推荐答案
SVG是内联的并且在表格单元格内部，所以尝试将 display：block 添加到 svg ，并将宽度/高度添加到< td> 以便SVG知道从中计算的百分比。
SVG is inline and inside of a table cell, so try adding display:block to svg and width/height to the <td> so that SVG knows what to calculate percentage from.
这篇关于如何删除< svg>之间的空格和< td>在HTML5？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
