Inline-SVG-Ausrichtung in HTML

Ich habe derzeit Probleme ausrichten, die inline-SVG richtig innerhalb ein umschließendes DIV, wie in diesem Beispiel.

<!DOCTYPE html>
<html>
<body>
    <div style="border: 1px solid black; height: 50px; width: 100px; vertical-align:top;">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"">
            <rect x="0" y="0" width="100" height="100" style="fill: red;" />
        </svg>
    </div>
</body>
</html>

SVG geändert ruft zu entsprechen, die die Abmessungen des div, aber ich bin nicht in der Lage, die Ausrichtung für die SVG. Weder text-align noch vertical-align funktionieren in Firefox 9, Chrome 18, IE 9 und Opera 11.61 . Ich will einfach nur, um die position des inline-SVG in die linke Obere Ecke des DIV.

Beachten Sie, dass in meinem Fall das umgebende DIV hat eine dynamische Abmessungen (%-Werte), also die absolute Positionierung funktioniert nicht.

Jemand eine Ahnung, wie das ausrichten der SVG in diesem Fall?

  • warum kann Sie hinzufügen einen wrapper ?
InformationsquelleAutor Sirko | 2012-01-26
  1. 21

    Hinzufügen preserveAspectRatio="xMinYMin" wie ein Attribut des svg-Elements z.B. http://jsfiddle.net/longsonr/fLWhu/

    • aber das hilft nicht ?
    • Es zeigt in der linken oberen für mich. Versuchen Sie zeichnen ein Bild von dem, was Sie wollen, wenn es das noch nicht.
    • komisch. hat auch nicht geklappt. aber wie jsfiddle zeigt deutlich - seine Arbeit. // ändern mein downvote zu upvote
    • danke. dies wird es tun.
    • Ich habe schon überall gesucht für dieses... danke 🙂
    • Die preserveAspectRatio - Eigenschaft in der Tat hilft richten Sie den Inhalt einer SVG. Es hat viele Optionen, obwohl, sehen, was für Sie arbeitet: developer.mozilla.org/en-US/docs/Web/SVG/Attribute/...

    InformationsquelleAutor Robert Longson
  2. 0

    Hinzufügen preserveAspectRatio="xMidYMid meet" Attribut <svg> element
    als pro http://tutorials.jenkov.com/svg/svg-viewport-view-box.html.

    • Warum würde die position in der oberen linken Ecke, die ist, was der OP wollte?
    InformationsquelleAutor Nick Serebrennikov
Schreibe einen Kommentar