it-swarm.com.de

Responsive INLINE SVG - Inhalt von svg muss übergeordnete Breite ausfüllen

ZIEL:

Ich versuche, ein INLINE SVG - Element zu erhalten, um die gesamte verfügbare Breite des übergeordneten Elements auszufüllen. Ich kann den gleichen Effekt auf einfache Weise erzielen, indem ich ein img und ein object -Tag verwende, um auf die SVG-Datei zu verweisen, aber ich möchte inline svg Verwenden, weil ich die SVG-inneren Elemente mit Javascript animiere .

PROBLEM:

Ich kann dies in Firefox und mit ein paar Verbesserungen auch in Chrome erreichen, aber Safari und IE9 und IE10 spielen keinen Ball.

  • Der innere Inhalt von svg füllt das svg-Element nicht immer in allen Bildschirmbreiten
  • das Webkit fügt eine mysteriöse Polsterung/Höhe hinzu (in diesem Beispiel befindet sich die Polsterung innerhalb des SVG-Elements). Die Höhe des SVG-Elements sollte automatisch sein und den inneren SVG-Inhalt umschließen.

HAUPTFRAGE:

Gibt es eine browserübergreifende Lösung für responsives INLINE-SVG: Sehen Sie sich das Beispiel in IE9 & 10 und -webkit-Safari an und beachten Sie die nicht erforderliche zusätzliche Höhe innerhalb des SVG-Elements (Farbe Cyan).

http://jsfiddle.net/David_Knowles/9tUAd/

<div class="block">stuff</div> 
<div class="wrap">
    <svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 550 350" xml:space="preserve" preserveAspectRatio="xMinYMin meet">

        <rect x="0" y="0" width="550" height="350"/>
        <polyline points="0,0 0,350 550,350"/>
        <text x="0" y="50%" fill="#ffffff" stroke="none" width="100%">The text</text>
    </svg>
</div>
<div class="block">stuff</div> 
32
Timidfriendly

Das erste Problem ist, dass Sie Ihr .svg-wrap - Div auf 100% Höhe setzen. 100% von was? In diesem Fall ist das übergeordnete Element des div das body-Element. Wenn Sie Inhalte auf Blockebene haben, die 100% der Körpergröße entsprechen, und andere In-Flow-Elemente, haben Sie immer eine vertikale Bildlaufleiste. weil Sie immer einen Inhalt von 100% + Ihrer .stuff - Elemente haben. Genau wie ein allgemeiner Tipp sollte ein ständiger Überlauf wie dieser der Hinweis sein, dass etwas in Ihrem CSS wackelig ist.

Wenn Sie sich weiter im DOM fortbewegen, zwingt die 100% -Höhenangabe in Ihrem svg -Element das svg, sich zum übergroßen Wrapper zu erweitern. Und das ist ein weiterer Teil des Täters.

Die Lösung, die ich benutze, beinhaltet intrinsische Verhältnisse . CSS wie folgt:

.svg-wrap {
    background-color:red;
    height:0;
    padding-top:63.63%; /* 350px/550px */
    position: relative;
}

svg {
    background-color: cyan;
    height: 100%;
    display:block;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
}

http://jsfiddle.net/pcEjd/

Getestet in den neuesten Versionen, FF, Chrome, Safari (jedoch nicht IE).

Die Nachteile dieses Ansatzes sind:

a) Sie müssen die Verhältnisse für alle Ihre Boxen vorberechnen oder ein Skript schreiben, das dies tut. Nicht so schlecht.

b) Sie können border-box nicht global mit der Sternauswahl verwenden, oder wenn Sie die Boxgröße für Ihre SVG-Container auf content-box zurücksetzen müssen. Machbar.

Als Randnotiz ist es offensichtlich nicht so, wie die Dinge funktionieren sollen. Browser sollten schlau genug sein, das SVG-Attribut viewBox zu betrachten, um die Proportionen zu ermitteln, die berechnete Breite (nach allen maximalen Breitengrenzen) zu berechnen und dann die Höhe zu berechnen.

Aber das funktioniert momentan nicht so. Es gibt einen weiteren seltsamen Fehler in Chrome wo das Hinzufügen von max-width:100% Zum SVG eine Situation schafft, in der das SVG immer auf die kleinste gerenderte Größe skaliert. Versuchen Sie, diese Geige in Chrome zu laden:

http://jsfiddle.net/ynmey/1/

Und du wirst überhaupt kein SVG sehen! Seltsam. Noch seltsamer ist es, die max-width - Deklaration in Dev Tools auszuschalten und dann mit der Breite des "result" -Ansichtsfensters in jsfiddle zu spielen. Nehmen Sie es etwas schmaler, dann breiter, dann schmaler, dann breiter. Beachten Sie, dass das SVG, sobald es verkleinert wird, seine Größe nicht mehr ändert, wenn das Ansichtsfenster größer wird!

Dies ist wichtig zu beachten, weil:

 * {max-width:100%}

ist ein allgemeiner (und absolut legitimer) Ansatz für reaktionsschnelles Design, der derzeit mit SVG in Blink Chaos anrichtet. Halten Sie sich vorerst an die intrinsischen Verhältnisse.

23
Ben

Der Standardanzeigetyp für Inline SVG-Elemente ist display: inline;. Dies bedeutet, dass das SVG-Element auf der typografischen Grundlinie des übergeordneten Elements platziert und entsprechend ausgerichtet wird. Unterhalb der Grundlinie ist immer etwas Platz, um die baumelnden Zeichen wie g und j und so weiter zu berücksichtigen.

Einfache Lösung: svg { display: block;} oder svg { display: inline-block; vertical-align: top; }.

7
jvhellemond

Ich habe es geschafft, in Webkit/Gecko-Browsern konsistente Ergebnisse zu erzielen, indem ich einen anderen height -Wert als auto oder 0. In meinem Beispiel verwende ich 1%, aber soweit ich das beurteilen kann, könnte es alles sein. Irgendwie wird dadurch die falsche Höhe in Webkit behoben (nach meinen Tests setzt auto die SVG-Höhe falsch auf 100% Fensterhöhe).

Ich habe dies noch nicht in IE getestet. Bitte lassen Sie mich wissen, ob es funktioniert.

http://jsfiddle.net/yXeru/

3
daviestar

Ich bin nicht ganz sicher, welchen Effekt Sie erzielen möchten, aber ich glaube, Sie suchen möglicherweise nach preserveAspectRatio = "xMinYMin slice".

2
Michael Mullany

Nach langem Hin und Her hat der moderne Browser nd IE11-kompatible Lösung, die ich verwendet habe, zwei Teile:

  1. Geben Sie sowohl viewBox als auch preserveAspectRatio="xMinYMin meet" Im SVG-Stammtag an.
  2. Verwenden Sie CSS-Medienabfragen, um Ihrem SVG-Element für jedes Layout eine Höhe in vw Einheiten zuzuweisen.

viel Glück!

0
ryanrain