¿Cómo eliminar el espacio entre <svg> y <td> en HTML5?

Utilizo el siguiente código para tener SVG incrustado en HTML5. El único problema que ahora no puedo resolver es que hay mucho espacio entre <svg> y <td> cuando el archivo HTML se ve en un navegador. ¿Puede alguien decirme cómo quitar el espacio?¿Cómo eliminar el espacio entre <svg> y <td> en HTML5?

¡Gracias de antemano!

Más detalles:

Lo siento, se me olvidó decir qué navegador que uso. Me parece que cuando uso IE9, hay mucho espacio entre el SVG y la barra izquierda y derecha. Sin embargo, cuando uso Chrome, hay mucho espacio entre SVG y la barra superior e inferior. Es bastante extraño.

Edito el código a continuación. Agrego svg {margin-top: 0px; margin-bottom: 0px; margin-right: 0px; margin-left: 0px; background-color: amarillo;}

en el código. Lo que quiero hacer es eliminar el espacio amarillo. Ahora la pregunta se vuelve más específica.

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

Fuente

2011-06-30 user811416

¿Cuánto espacio? 4px, como el relleno que ha configurado en 'td.i'? –

Especificar qué navegador usar no le dolería. Supongo que es Firefox, por lo que puedo decir que ningún otro navegador admite mezclar HTML y SVG así todavía. –

jsFiddle para jugar en http://jsfiddle.net/BJgRT/ –

SVG es en línea y en el interior de una celda de tabla, a fin de tratar de añadir a display:blocksvg y anchura/altura a la <td> modo que SVG sabe lo que permite calcular el porcentaje de.

Fuente

2011-07-01 18:43:26

Hola Spadar, intenté tu camino, y el área amarilla se vuelve más pequeña. Muchas gracias. – user811416

De nada. Si esto le ayudó, podría marcar este comentario como la solución aceptada;) –

Lo siento, Sapdar. Mi reputación no es lo suficientemente alta, así que no puedo votar ... – user811416

que asumen que quiere decir el espacio debajo de la imagen SVG porque de lo contrario es sólo el 4px que quería. El espacio a continuación proviene del espacio en blanco que contiene la celda de la tabla además de su imagen. Usted fácilmente puede "arreglar" esto cambiando la altura del texto:

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

Fuente

2011-06-30 14:13:26

Hola Palant, pruebo tu código en Chrome, pero no funciona. Creo que la razón puede ser que "altura de línea" no es compatible con html5. – user811416

@ user811416: No, eso es porque ha configurado 'ancho' /' alto' de su imagen SVG en '100%' - ¿de qué? Si establece un tamaño fijo para su imagen SVG o si define un tamaño para la celda de la tabla que lo contiene, todo funcionará correctamente. Por cierto, no estaría de más que empezaras a responder preguntas: no me gusta adivinar qué navegador estás usando ya qué tipo de problema te refieres. –

@ user811416 También podría solucionarlo haciendo 'svg' un elemento de nivel de bloque. Además, Wladimir tiene razón: una de las características definitorias de las tablas es que se expanden automáticamente para contener su contenido, si quieres usar '100%' para dar tamaño a tu imagen, debes tener un contenedor de tamaño definido para tu imagen entrar por el '100%' para significar cualquier cosa. – robertc

puedo cambiar

SVG {margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px; background-color: amarillo;}

para ser

SVG {margin-top: 0px;
margin-bottom: 0px;
margin-right: -150px;
margin-left: 0px; background-color: amarillo;}

A continuación, el espacio de color amarillo desaparece en IE9. Esta solución no funciona en Chrome ...

Fuente

2011-07-01 07:02:34 user811416

Este parece ser el problema con el tamaño de SVG predeterminado de webkit de 350px por 150px.

Este es probablemente mi artículo favorito de ello todavía: http://henkelmann.eu/2010/12/16/display_svg_image_same_size_in_decent_browsers

Por lo tanto, el problema es que se necesita configurar un tamaño de píxel rígida para su SVG, o establecer un tamaño de su contenedor rígido.No he encontrado una manera de permitir la escala dinámica (a menos que lo haga en javascript, que se puede encontrar una solución en los comentarios aquí: How do I scale a stubborn SVG embedded with the <object> tag?).

Fuente

2011-09-09 22:23:43

¿Cómo eliminar el espacio entre <svg> y <td> en HTML5?

Respuesta

Cuestiones relacionadas