height: auto no SVG não está funcionando

Estou tentando usar uma folha de sprite SVG usando o método "symbol" detalhado aqui.

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

Meu HTML é muito simples.

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

E aqui está um exemplo de símbolo do arquivo 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>

O problema que estou enfrentando é que, quando uso CSS para definir a largura do elemento SVG para 64px, a altura do SVG é automaticamente definida para 150 pixels. Eu tentei definir a altura: auto; e altura: 100%; no elemento SVG, mas não faz diferença. A única maneira de fazê-lo funcionar é definir a altura: 64px; o que não quero fazer porque a proporção dos meus ícones nem sempre é quadrada. O que eu quero que ele faça é dimensionar automaticamente o SVG em sua proporção original, para que um ícone 4: 3 (conforme definido pela caixa de exibição) obtenha automaticamente uma altura de 300px se eu definir a largura para 400px.

Li vários guias sobre como escalar SVG e preservar a proporção e alguns têm soluções ao usar um elemento IMG, mas não consigo encontrar um para SVGS embutido ou usando um SVG externo com USE.

Alguém conhece uma solução que funcione em todos os navegadores, incluindo IE9 + e Android 4.0+?

questionAnswers(2)

yourAnswerToTheQuestion