height: auto on SVG funktioniert nicht

Ich bin versucht, ein SVG-sprite-sheet mit Hilfe der "symbol" - Methode hier beschrieben.

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

Mein HTML-Code ist sehr einfach.

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

Und hier ein Beispiel, das 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, um die Breite der SVG-element zu 64px Höhe der SVG-Datei wird automatisch auf 150 Pixel. Ich habe versucht, height:auto; und height:100%; auf das SVG-element, aber es macht keinen Unterschied. Der einzige Weg, um es zu arbeiten, ist das festlegen der Höhe:64px; was ich nicht tun will, weil das Seitenverhältnis von meinen icons nicht immer quadratisch sein. Was ich will, es zu tun, ist die automatische Skalierung der SVG in seiner ursprünglichen Seitenverhältnis, also 4:3 Symbol (definiert durch die viewbox) würde automatisch ein heightof 300px wenn ich die Breite auf 400px.

Habe ich gelesen, mehrere guides zur Skalierung von SVG und beibehalten des Seitenverhältnisses und einige verfügen über Lösungen, wenn über ein IMG-element, aber ich kann nicht finden, eine für inline-SVGS, oder mit einem externen SVG mit.

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

InformationsquelleAutor jonhobbs | 2015-01-29
  1. 15

    DEMO

    Müssen Sie zum definieren einer viewBox auf jedes element, das Sie link zu.
    weil es sein kann, verschiedene Elemente in einem SVG-Dokument.

    So entfernen Sie die viewBox aus dem element, das Sie link zu.
    Hinzufügen eines viewBox zu dem Ort, Sie verknüpfen aus.

    Ich schlage vor, Sie fügen Sie die viewBox, um ein svg-element:

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

    Nun können Sie skalieren:

    Wenn Sie definieren die css-Breite:

    .test {
    width: 50px;
}

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

    Wenn Sie So wollen, ein responsive design können Sie ganz einfach skalieren, indem % Länge

    .test { width:30%; }

    MAßSTAB SVG Einen wirklich guten Artikel über die Skalierung von svg CSS-tricks 🙂

    InformationsquelleAutor Persijn
  2. 1

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

    In meinem Beispiel habe ich anwenden müssen, height:100%; sowie eine Breite.

    InformationsquelleAutor skribbz14
Schreibe einen Kommentar