如何清除HTML5中<svg>和之间的空格？

我使用下面的代码将SVG嵌入到HTML5中。现在我唯一不能解决的问题是，在浏览器中查看HTML文件时，<svg>和<td>之间有很大的空间。有人能告诉我如何去除空间吗？如何清除HTML5中<svg>和之间的空格？

预先感谢您！

更多细节：

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

我编辑下面的代码。我加 svg {margin-top：0px; margin-bottom：0px; margin-right：0px; margin-left：0px; background-color：yellow;}

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

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

来源

2011-06-30 user811416

多少空间？ 4px，就像你在'td.i'上设置的填充一样？ –

指定您使用的浏览器不会受到伤害。我想这是Firefox，从我可以告诉其他任何浏览器都不支持混合HTML和SVG。 –

jsFiddle在http://jsfiddle.net/BJgRT/ –

SVG是inline和表格单元格内，所以尽量增加display:block到svg和宽/高为<td>，使SVG知道从计算百分比。

来源

2011-07-01 18:43:26

嗨斯巴达，我试了你的方式，黄色区域变得更小。非常感谢你。 – user811416

不客气。如果这有助于您将此评论标记为已接受的解决方案;） –

对不起，Sapdar。我的声望不够高，所以我不能投票... – user811416

我假设你的意思是SVG图像下方的空间，因为否则它只是4px你想要的。下面的空间来自表格单元格包含的空白以及图像。

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

来源

2011-06-30 14:13:26

嗨Palant，我在Chrome中尝试你的代码，但它不起作用。我认为原因可能是html5中不支持“行高”。 – user811416

@ user811416：不，这是因为您将SVG图像的宽度/高度设置为100％ - 实际上是什么？如果为SVG图像设置了固定大小，或者如果为包含它的表格单元格定义大小，则所有内容都将正常工作。顺便说一句，如果你开始回答问题，它不会受到伤害 - 我不喜欢猜测你使用的浏览器和你的意思。 –

@ user811416你也可以通过使'svg'成为块级元素来修复它。此外，弗拉基米尔是正确的 - 表格的定义特点之一是，他们自动扩大以包含他们的内容，如果你想使用'100％'来调整你的形象，你必须有一个确定大小的容器为你的形象去争取“100％”意味着什么。 – robertc

我改变

SVG {边距：通过改变文本高度，您可以轻松 “解决” 这个0像素;
margin-bottom：0px;
margin-right：0px;
保证金左：0像素;背景色：黄;}

是

SVG {边距：0像素;
margin-bottom：0px;
margin-right：-150px;
利润率左：0像素;背景色：黄;}

然后，黄色空间中IE9消失。这种解决方案并不在Chrome工作...

来源

2011-07-01 07:02:34 user811416

这看起来是webkit的默认SVG大小为350px×150px的问题。

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

那么，问题是，你需要可以设置一个刚性像素大小为您的SVG，或将您的容器的刚性大小。我还没有找到一种方法来允许动态缩放（除非您使用javascript进行动画缩放，可以在这里的注释中找到解决方案：How do I scale a stubborn SVG embedded with the <object> tag?）。

来源

2011-09-09 22:23:43

如何清除HTML5中<svg>和​​之间的空格？

回答

相关问题

如何清除HTML5中<svg>和之间的空格？