如何清除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>和之間的空格？