Tôi sử dụng mã bên dưới để nhúng SVG vào HTML5. Vấn đề duy nhất bây giờ tôi không thể giải quyết là có nhiều không gian giữa <svg> và <td> khi tệp HTML được xem trong trình duyệt. Ai đó có thể cho tôi biết làm thế nào để loại bỏ không gian?Cách xóa không gian giữa <svg> và <td> trong HTML5?
Cảm ơn bạn trước!
Chi tiết khác:
Xin lỗi, tôi quên nói tôi đang sử dụng trình duyệt nào. Tôi thấy rằng khi tôi sử dụng IE9, có nhiều khoảng trống giữa SVG và thanh bên trái và bên phải. Tuy nhiên, khi tôi sử dụng Chrome, có nhiều khoảng trống giữa SVG và thanh trên cùng và dưới cùng. Nó khá kỳ lạ.
Tôi chỉnh sửa mã bên dưới. Tôi thêm svg {margin-top: 0px; margin-bottom: 0px; lề phải: 0px; lề trái: 0px; màu nền: màu vàng;}
trong mã. Những gì tôi muốn làm là để loại bỏ các không gian màu vàng. Bây giờ câu hỏi trở nên cụ thể hơn.
<!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>
Bao nhiêu không gian? 4px, giống như phần đệm bạn đã đặt trên 'td.i'? –
Chỉ định trình duyệt nào bạn sử dụng sẽ không bị tổn thương. Tôi đoán rằng đó là Firefox, từ những gì tôi có thể nói không có trình duyệt khác hỗ trợ trộn HTML và SVG như thế nào được nêu ra. –
jsFiddle để chơi với tại http://jsfiddle.net/BJgRT/ –