如何删除 HTML5 中 <svg> 和 <td> 之间的空格？答案

【问题标题】：How to remove the space between the <svg> and the <td> in HTML5?如何删除 HTML5 中 <svg> 和 <td> 之间的空格？
【发布时间】：2011-09-10 06:23:43
【问题描述】：

我使用下面的代码将 SVG 嵌入 HTML5。现在我无法解决的唯一问题是，当在浏览器中查看 HTML 文件时，<svg> 和 <td> 之间有很多空间。谁能告诉我如何删除空间？

提前谢谢你！

更多细节：

抱歉，我忘了说我使用的是哪个浏览器。我发现当我使用IE9时，SVG和左右栏之间有很大的空间。但是，当我使用 Chrome 时，SVG 与顶部和底部栏之间有很大的空间。这很奇怪。

我编辑下面的代码。我加 SVG {边距顶部：0px；边距底部：0px；边距右：0px；左边距：0px；背景颜色：黄色；}

在代码中。我想要做的是删除黄色空间。现在问题变得更具体了。

<!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>

【问题讨论】：

多少空间？ 4px，就像你在td.i上设置的填充？
指定您使用的浏览器不会受到伤害。我猜是 Firefox，据我所知还没有其他浏览器支持像这样混合 HTML 和 SVG。
jsFiddle 在jsfiddle.net/BJgRT玩
SVG 不是 HTML5 的一部分。
@BoltClock SVG is a part of HTML5.

标签： html svg

【解决方案1】：

SVG 是内联的并且位于表格单元格内，因此请尝试将 display:block 添加到 svg 并将宽度/高度添加到 <td> 以便 SVG 知道从什么计算百分比。

【讨论】：

+1，一个 CSS 规则 svg { display: block; } 帮助我摆脱了一些顽固的填充，这些填充显示在我的内联 SVG 下方。
非常感谢，这让我发疯了！从来没有想过 svg 是内联的。

【解决方案2】：

我变了

svg {margin-top:0px;
边距底部：0px;
右边距：0px;
左边距：0px；背景颜色：黄色；}

成为

svg {margin-top:0px;
边距底部：0px;
右边距：-150px;
左边距：0px；背景颜色：黄色；}

然后黄色空间在IE9中消失。此解决方案在 Chrome 中不起作用...

【讨论】：

【解决方案3】：

我假设您指的是 SVG 图像下方的空间，否则它就是您想要的 4px。下面的空格来自表格单元格除了您的图像之外还包含的空格。您可以通过更改文本高度轻松“修复”此问题：

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

【讨论】：

嗨 Palant，我在 Chrome 中尝试了您的代码，但它不起作用。我认为原因可能是html5不支持“line-height”。
@user811416：不，那是因为您将 SVG 图像的 width/height 设置为 100% - 实际上是什么？如果您为 SVG 图像设置了固定大小，或者为包含它的表格单元格定义了大小，那么一切都会正常工作。顺便说一句，如果您开始回答问题也不会受到伤害 - 我不喜欢猜测您使用的是哪个浏览器以及您的意思是哪个问题。
@user811416 你也可以通过将svg 设置为块级元素来修复它。此外，Wladimir 是正确的 - 表格的定义特征之一是它们会自动扩展以包含其内容，如果您想使用 100% 来调整您的图像大小，您必须为您的图像提供一个确定大小的容器进入100% 表示任何含义。
嗨，弗拉基米尔，我第一眼看到你的回答就修改了我的问题。
嗨，罗伯特，你是对的。我将高度和宽度更改为指定值，黄色空间消失。这与我在四天前将高度和宽度设置为指定值时看到的完全不同。那时，只能显示部分 svg。无论如何，问题解决了。谢谢你们。

【解决方案4】：

这似乎是 webkit 的默认 SVG 尺寸 350 像素 x 150 像素的问题。

这可能是我最喜欢的关于它的文章：http://henkelmann.eu/2010/12/16/display_svg_image_same_size_in_decent_browsers

所以，问题在于您需要为您的 svg 设置一个严格的像素大小，或者为您的容器设置一个严格的大小。我还没有找到允许动态缩放的方法（除非你在 javascript 中进行，可以在此处的 cmets 中找到解决方案：How do I scale a stubborn SVG embedded with the <object> tag?）。

【讨论】：