El elemento SVG parece tener una altura arbitraria

He estado tratando de aprender algo de SVG. Pero los navegadores parecen entrar en un enigmático viejo que lo renderiza.El elemento SVG parece tener una altura arbitraria

Tome el código HTML siguiente:

<html> 
    <head></head> 
    <body> 
    <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"> 
     <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
    </svg> 
    <p>Hello? Hellooooooooooooo?</p> 
    </body> 
</html>

Ver esto es cualquier navegador moderno y verá una cantidad arbitraria de espacios en blanco entre el rectángulo y el siguiente párrafo HTML. (IE9 no muestra nada, pero nadie se sorprenderá al respecto.)

Firefox (Firebug) no da las alturas de los elementos svg o rect. Simplemente se abre y dice 'auto'.

Opera dice que el svg tiene una altura de 150px y dice 'auto' para el rect.

Chrome crea y da alturas para ambos. 102px para el rect (obviamente incluyendo el trazo) y 428px para el svg.

Mi expectativa es que el elemento svg sea un contenedor 'delgado' (es decir, no agregue nada a las dimensiones de su contenido) y, por lo tanto, tenga una altura de 102px.

¿Alguien sabe cuál debería ser el comportamiento correcto y cómo podría solucionarlo?

Fuente

2012-01-01 David

¿Podría explicar el infractor por sí mismos? – David

Ah. 2 votos abajo. Sin explicación o sugerencia. Trolls? – David

No ha definido explícitamente el ancho o alto del SVG, o dónde se coloca el rectángulo, o incluso qué parte del SVG es de su interés. No es de extrañar que los navegadores manejen las cosas de manera diferente.

Tratar la definición de una anchura y altura:

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="102px" height="102px"> 
    <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
</svg>

Alternativamente, definir un viewBox:

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 102 102"> 
    <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
</svg>

o ambas:

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 52 52" width="102px" height="102px"> 
    <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/> 
</svg>

Here are some examples in action.

Fuente

2012-01-01 23:35:04 robertc

Gracias robertc. Entonces, ¿tengo que calcular las dimensiones de los dibujos dentro del elemento 'svg' para darle ancho y alto? Supuse que se dimensionaría en torno a su contenido, al igual que, digamos, un 'div'. – David

Gracias por el enlace jsfiddle por cierto. Esta es la respuesta útil arquetípica. – David

@David No se dimensionará alrededor de los contenidos porque los 'contenidos' son un plano infinito;) – robertc

El elemento SVG parece tener una altura arbitraria

Respuesta

Cuestiones relacionadas