SVG larghezza elemento e impostare in html, ma che appare come 0 0 ispettore

Question

Ho uno svg rect come questa altezza:

<svg class="legend-square"> 
    <defs> 
    <pattern id="pattern1" width="3" 
    height="3" patternunits="userSpaceOnUse" patterntransform="rotate(-45)"> 
     <rect width="2" height="3" transform="translate(0,0)" fill="purple"></rect> 
    </pattern> 
    </defs> 
    <rect width="12" height="12" fill="url(#pattern1)"></rect> 
</svg> 

Quando ho ispezionare il secondo rettangolo con Chrome non ha larghezza e l'altezza. Non ci sono regole CSS ad esso applicabili. Perché non viene influenzato dalla larghezza e dall'altezza?

Answer 1

Funziona correttamente.

Se il frammento lavora individualmente, ma dimensione del div contenitore in voi il codice appare 0x0 quindi cercare in: Why is my div's height zero

Il suo solito causato quando float è impostato.

<div> 
 
    <svg class="legend-square"> 
 
    <defs> 
 
     <pattern id="pattern1" width="3" height="3" patternunits="userSpaceOnUse" patterntransform="rotate(-45)"> 
 
     <rect width="2" height="3" transform="translate(0,0)" fill="purple"></rect> 
 
     </pattern> 
 
    </defs> 
 
    <rect width="12" height="12" fill="url(#pattern1)"></rect> 
 
    </svg> 
 
</div>

Answer 2

Davvero non hanno fornito informazioni sufficienti. Ad esempio, qual è l'elemento principale del tuo SVG?

Proprio perché il tuo <rect> ha larghezza e altezza, non significa SVG. SVG non è come l'HTML, dove gli elementi si espandono per adattarsi ai loro figli. SVG è come l'elemento <canvas>. Devi assicurarti che esplicitamente (o implicitamente) abbia una dimensione.

Non sono stati specificati gli attributi di larghezza o altezza per l'elemento <svg>, quindi sono entrambi predefiniti su "100%". Quello che sono al 100% dipende dalla dimensione dell'elemento genitore di SVG. Quindi la mia prima domanda sopra.