Come posso creare una scala svg con il suo contenitore genitore?

Question

Desidero avere una scala di contenuto dell'elemento svg in linea quando la dimensione non è nativa. Certamente potrei averlo come un file separato e ridimensionarlo in quel modo.

index.html: <img src="foo.svg" style="width: 100%;" />

foo.svg: <svg width="123" height="456"></svg>

Tuttavia, voglio aggiungere stili aggiuntivi per l'SVG tramite CSS, così collegando uno esterno non è un'opzione. Come posso creare una scala SVG in linea?

Answer 1

Per specificare le coordinate all'interno dell'immagine SVG indipendentemente dalla dimensione ridimensionata dell'immagine, utilizzare l'attributo viewBox sull'elemento SVG per definire cosa è il riquadro di delimitazione dell'immagine nel sistema di coordinate dell'immagine e utilizzare il width e height attributi per definire quale larghezza o altezza sono rispetto alla pagina contenente.

Per esempio, se avete la seguente:

<svg> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg> 

Si renderà come 10px da 20px triangolo:

Ora, se si imposta solo la larghezza e l'altezza, che cambierà la dimensione dell'elemento SVG, ma non in scala triangolo:

<svg width=100 height=50> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg> 

Se si imposta la casella di visualizzazione, ciò provoca la trasformazione dell'immagine in modo tale che la casella specificata (nel sistema di coordinate dell'immagine) venga ridimensionata per adattarsi alla larghezza e all'altezza specificate (nel sistema di coordinate della pagina). Per esempio, per scalare il triangolo di essere 100px per 50px:

<svg width=100 height=50 viewBox="0 0 20 10"> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg> 

Se si desidera ridimensionare fino alla larghezza della finestra HTML:

<svg width="100%" viewBox="0 0 20 10"> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg> 

Si noti che per impostazione predefinita, le proporzioni vengono mantenute.Quindi, se si specifica che l'elemento deve avere una larghezza di 100%, ma un'altezza di 50px, sarà effettivamente scalare solo fino all'altezza di 50px (a meno che non si dispone di una finestra molto stretta):

<svg width="100%" height="50px" viewBox="0 0 20 10"> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg> 

Se si vuole realmente di allungare orizzontalmente, disattivare aspetto conservazione rapporto con preserveAspectRatio=none:

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none"> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg> 

(notare che mentre nei miei esempi Io uso la sintassi che lavora per incorporamento HTML, per includere gli esempi come un'immagine in StackOverflow sto invece l'incorporamento all'interno di un altro formato SVG, quindi ho bisogno di utilizzare la sintassi XML valido)

Answer 2

You' ll voler fare una trasformazione in quanto tale:

con JavaScript:

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)"); 

con i CSS:

#yourtarget { 
    transform:scale(2.0); 
    -webkit-transform:scale(2.0); 
} 

Avvolgete il vostro SVG pagina in un tag gruppo come tali e destinarli a manipolare l'intera pagina:

<svg> 
    <g id="yourtarget"> 
    your svg page 
    </g> 
</svg> 

Nota: Scala 1.0 è al 100%

Answer 3

Nei guai & pensa che questa CSS sembra contenere l'SVG in browser Chrome fino al punto in cui il contenitore è più grande dell'immagine:

div.inserted-svg-logo svg { max-width:100%; } 

sembra anche funzionare in FF + IE 11.