altezza: auto su SVG non funzionante

Question

Sto tentando di utilizzare un foglio sprite SVG utilizzando il metodo "simbolo" qui descritto.

http://css-tricks.com/svg-sprites-use-better-icon-fonts/

mio HTML è molto semplice.

<svg><use xlink:href="/images/iconSprite.svg#camera"/></svg> 

E qui è un simbolo esempio del file in formato SVG

<symbol viewBox="0 0 24 24" id="clock"><g transform="translate(0 -1028.4)"><path d="M22.085 1035.955a10.997 10.997-23.5 1 1-20.17 8.77 10.997 10.997-23.5 1 1 20.17-8.77z" fill="#1abc9c"/><path d="M21 1040.335a9 9 0 1 1-18 0 9 9 0 1 1 18 0z" fill="#ecf0f1"/><path d="M1.034 1039.8c-.083 1.7.176 3.3.875 4.9 2.42 5.6 8.898 8.2 14.468 5.8 4.29-1.9 6.778-6.2 6.593-10.6-.202 4-2.63 7.8-6.592 9.6-5.57 2.4-12.047-.2-14.47-5.8-.556-1.2-.82-2.6-.874-3.9z" fill="#16a085"/><path d="M20 1040.4c0 .5-.448 1-1 1h-6v-2h6c.552 0 1 .4 1 1z" fill="#3498db"/><path d="M12 1033.4c-.552 0-1 .448-1 1v5h2v-5c0-.552-.448-1-1-1z" fill="#2c3e50"/><path fill="#c0392b" d="M6.017 1045.705l4.95-4.95.707.707-4.95 4.95z"/><path d="M12 1038.4c-1.105 0-2 .9-2 2s.895 2 2 2 2-.9 2-2-.895-2-2-2zm0 1c.552 0 1 .4 1 1 0 .5-.448 1-1 1s-1-.5-1-1c0-.6.448-1 1-1z" fill="#34495e"/></g></symbol> 

Il problema che sto avendo è che quando uso CSS per impostare la larghezza dell'elemento SVG per 64px l'altezza del SVG viene automaticamente impostato su 150 pixel. Ho provato ad impostare l'altezza: auto; e altezza: 100%; sull'elemento SVG ma non fa differenza. L'unico modo per farlo funzionare è impostare l'altezza: 64px; che non voglio fare perché le proporzioni delle mie icone potrebbero non essere sempre quadrate. Quello che voglio che faccia è ridimensionare automaticamente l'SVG nel suo formato originale, quindi un'icona 4: 3 (come definita dalla finestra di visualizzazione) otterrebbe automaticamente un'altezza di 300 px se imposto la larghezza a 400px.

Ho letto diverse guide sul ridimensionamento SVG e preservando le proporzioni e alcuni hanno soluzioni quando si utilizza un elemento IMG ma non riesco a trovarne uno per SVGS in linea o utilizzando un SVG esterno con USE.

Qualcuno conosce una soluzione che funziona in tutti i browser inclusi IE9 + e Android 4.0+?

Answer 1

DEMO

è necessario definire un viewBox su ogni elemento che si collega a. perché ci possono essere diversi elementi in un documento SVG.

Quindi rimuovere viewBox dall'elemento a cui si collega. Aggiungi un viewBox al luogo di collegamento.

vi suggerisco di aggiungere il viewBox ad un elemento SVG:

<svg class="test" viewBox="0 0 25 25"> 
    <use xlink:href="/images/iconSprite.svg#clock"/> 
</svg> 

Ora è possibile scalarla:

Se si definisce la larghezza css:

.test { 
    width: 50px; 
} 

Mostrerà come finché si adatta all'altezza o alla larghezza.

Quindi, se si desidera un responsive design si può semplicemente scalare facendo % lunghezza
.test { width:30%; }

SCALE SVG Davvero un buon articolo su scala svg da CSS-trucchi :)

Answer 2

Nelle versioni precedenti di Safari, così come alcuni vecchi browser Android, l'impostazione della viewbox e la larghezza non erano sufficienti.

Nel mio caso, ho bisogno di applicare altezza: 100%; così come una larghezza.