Höhe: Auto auf SVG funktioniert nicht

Question

Ich versuche, ein SVG-Sprite-Blatt 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 Beispiel Symbol 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 die Breite des SVG Elements zur Einstellung der Höhe der SVG 64px wird automatisch auf 150 Pixel gesetzt. Ich habe versucht, Höhe einzustellen: auto; und Höhe: 100%; auf dem SVG-Element, aber es macht keinen Unterschied. Der einzige Weg, um es zum Laufen zu bringen, ist die Höhe: 64px; was ich nicht machen möchte, weil das Seitenverhältnis meiner Icons nicht immer quadratisch sein kann. Ich möchte, dass das SVG automatisch in seinem ursprünglichen Seitenverhältnis skaliert wird, so dass ein 4: 3-Icon (wie in der Viewbox definiert) automatisch eine Höhe von 300 Pixeln erreichen würde, wenn ich die Breite auf 400 px einstellen würde.

Ich habe mehrere Anleitungen zur Skalierung von SVG und Erhaltung des Seitenverhältnisses gelesen und einige haben Lösungen, wenn Sie ein IMG-Element verwenden, aber ich kann kein für Inline SVGS oder ein externes SVG mit USE finden.

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

Answer 1

DEMO

Sie benötigen einen viewBox für jedes Element zu definieren, die Sie verknüpfen. , weil es verschiedene Elemente in einem SVG Dokument geben kann.

So entfernen Sie die viewBox von dem Element, das Sie verknüpfen. Fügen Sie einen viewBox zu dem Ort hinzu, von dem aus Sie verlinken.

Ich schlage vor, Sie viewBox zu einem svg Element hinzufügen:

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

Jetzt können Sie es skalieren:

Wenn Sie die CSS Breite definieren:

.test { 
    width: 50px; 
} 

Es wird angezeigt, wie so lange es auf Höhe oder Breite passt.

Wenn Sie also ein Responsive Design möchten, können Sie einfach skalieren von % Länge
.test { width:30%; }

SCALE SVG Ein wirklich guter Artikel über svg von CSS-Tricks Skalierung :)

Answer 2

In älteren Versionen von Safari, sowie ein paar alte Android-Browser, die Einstellung der Viewbox und die Breite war nicht genug.

In meinem Fall muss ich Höhe anwenden: 100%; sowie eine Breite.