Come posso ridimensionare un SVG?

Ho codice in questo modo:Come posso ridimensionare un SVG?

<span> 
    <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;"> 
     <desc></desc> 
     <defs/> 
     <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/> 
     </svg>&nbsp; 
    </span>

ho tagliato fuori la maggior parte del contenuto e lo ha sostituito con ...

Questo crea attualmente un 32 da 32 icona. Quello che vorrei sapere è che posso usare questo codice per creare un'icona 100 per 100? Ho provato a cambiare la larghezza e l'altezza ma non ha fatto alcuna differenza.

fonte

2012-03-01 Samantha J T Star

Gli attributi width e height sull'elemento SVG definiscono solo la dimensione dell'area di disegno. Non scalano il contenuto per adattarsi a quell'area. Per questo, è necessario utilizzare anche l'attributo viewBox, in questo modo:

<svg viewBox="0 0 32 32" height="100" width="100" ...>

L'attributo viewBox stabilisce il sistema di coordinate che viene utilizzato per tutti gli elementi figlio del SVG. È quindi possibile utilizzare la larghezza e l'altezza per estendere questo sistema di coordinate alla dimensione desiderata.

È possibile utilizzare l'attributo preserveAspectRatio per decidere come ridimensionare se i rapporti di formato non corrispondono.

fonte

2012-03-01 18:40:39 mercator

Quando la larghezza dello svg è maggiore di quella del punto di vista, non sembra funzionare. Ho risultati migliori con widged

@widged, non ci dovrebbero essere differenze tra 'style' vs.' width' e 'altezza'. Quindi l'unica differenza che posso vedere tra il tuo SVG e il mio è che vuoi ridimensionare un grande SVG _down_ alle dimensioni dell'icona, mentre la domanda è stata posta sullo scaling _up_ di un SVG di dimensioni di un'icona. Il metodo è sempre lo stesso. – mercator

Ieri ho avuto alcuni strani comportamenti che non riesco a riprodurre oggi. Forse alcuni errori di battitura coinvolti. La semplice demo su http://bl.ocks.org/widged/8428059 mostra che la riduzione delle dimensioni funziona in effetti con attributi o stili di dimensione. – widged

Come posso ridimensionare un SVG?

risposta

Problemi correlati