L'elemento SVG sembra avere un'altezza arbitraria

Ho davvero cercato di imparare un po 'di SVG. Ma i browser sembrano avere una giusta confusione per renderlo visibile.L'elemento SVG sembra avere un'altezza arbitraria

Prendere il seguente codice HTML:

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

Visualizza questa è un qualsiasi browser moderno e vedrete una quantità arbitraria di spazio tra il rettangolo e il seguente paragrafo HTML. (IE9 non visualizza nulla ma nessuno ne sarà sorpreso.)

Firefox (Firebug) non dà l'altezza degli elementi svg o rect. E 'appena uscito fuori e dice' auto '.

Opera dice che lo svg ha un'altezza di 150 px e dice "auto" per lo rect.

Chrome si alza e dà altezze per entrambi. 102 px per lo rect (incluso ovviamente il tratto) e 428 px per lo svg.

La mia aspettativa è che l'elemento svg sia un contenitore "sottile" (ovvero non aggiunga nulla alle dimensioni del suo contenuto) e quindi abbia un'altezza di 102 pixel.

Qualcuno sa quale dovrebbe essere il comportamento corretto e come posso risolvere il problema?

fonte

2012-01-01 David

Il pluviometro potrebbe spiegarsi? – David

Ah. 2 downvotes. Nessuna spiegazione o suggerimento. Trolls? – David

Non è stato definito in modo esplicito quale sia la larghezza o l'altezza di SVG o dove sia posizionato il rettangolo o anche quale parte di SVG sia interessante. Non sorprende che i browser abbiano a che fare con le cose in modo diverso.

Prova la definizione di una larghezza e altezza:

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

In alternativa, definire 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 entrambe le cose:

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

fonte

2012-01-01 23:35:04 robertc

Grazie, robertc. Quindi devo calcolare le dimensioni dei disegni all'interno dell'elemento 'svg' per darle una larghezza e un'altezza? Immaginavo che si sarebbe dimensionato attorno al suo contenuto, molto simile, ad esempio, a un div. – David

Grazie per il collegamento jsfiddle a proposito. Questa è la risposta utile archetipica. – David

@David Non si dimensionerà attorno al contenuto perché i 'contenuti' sono un piano infinito;) – robertc

L'elemento SVG sembra avere un'altezza arbitraria

risposta

Problemi correlati