Ich versuche, ein SVG-Sprite-Sheet mit der hier beschriebenen "Symbol" -Methode zu verwenden.

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

Mein HTML ist sehr einfach.

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

Und hier ist ein Beispielsymbol aus der SVG-Datei

<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>

Das Problem, das ich habe, ist, dass, wenn ich CSS verwende, um die Breite des SVG-Elements auf 64 Pixel festzulegen, die Höhe des SVG automatisch auf 150 Pixel festgelegt wird. Ich habe versucht, die Höhe einzustellen: auto; und Höhe: 100%; auf das SVG-Element macht es aber keinen Unterschied. Die einzige Möglichkeit, es zum Laufen zu bringen, ist das Festlegen der Höhe: 64px; was ich nicht tun möchte, weil das Seitenverhältnis meiner Symbole möglicherweise nicht immer quadratisch ist. Ich möchte, dass die SVG-Datei automatisch im ursprünglichen Seitenverhältnis skaliert wird, sodass ein 4: 3-Symbol (wie in der Viewbox definiert) automatisch eine Höhe von 300px erhält, wenn ich die Breite auf 400px setze.

Ich habe mehrere Anleitungen zum Skalieren von SVG und Beibehalten des Seitenverhältnisses gelesen und einige haben Lösungen für die Verwendung eines IMG-Elements, aber ich kann keine für Inline-SVGS oder für die Verwendung eines externen SVG mit USE finden.

Kennt jemand eine Lösung, die in allen Browsern einschließlich IE9 + und Android 4.0 + funktioniert?