Wie man ein <svg> element zu erweitern oder Vertrag zu seinem übergeordneten container?

Ziel ist die <svg> element erweitern, um die Größe des übergeordneten Containers, in diesem Fall ein <div>, egal wie groß oder klein, dass die container werden können.

Code:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="100" height="100" />
    </svg>
</div>

Die häufigste Lösung für dieses problem scheint die Einstellung der viewBox - Attribut auf die <svg> element.

viewBox="0 0 widthOfContainer heightOfContainer"

Jedoch, dies scheint nicht zu funktionieren, in Fällen, wo die Elemente innerhalb des <svg> element mit vordefinierten breiten und/oder Höhen. Zum Beispiel, die <rect> element, in dem obigen code, hat seine Breite und Höhe explizit festgelegt.

Also die offensichtliche Lösung ist die Verwendung von % breiten und % heights auf diese Elemente als gut. Aber muss diese auch gemacht werden müssen? Vor allem, da <img src=test.svg > funktioniert einwandfrei und erweitert/Verträge ohne Probleme mit explizit festgelegt <rect> Höhen und breiten.

Wenn Elemente wie <rect>, und andere Elemente, wie es ist, haben Ihre breiten und Höhen definiert in Prozenten, gibt es eine Möglichkeit, in Inkscape es so eingerichtet, dass alle Elemente mit der <svg> Dokument die prozentuale breiten, Höhen, etc.. anstatt Feste Maße?

Speichern Sie die svg-Datei als Referenz, es als ein Bild, wie <img src="Datei.svg"/> und auf diese Weise können Sie width:100% oder height:100%
Möglich, Duplikat der Wie kann ich eine svg-Skala mit den übergeordneten container?

InformationsquelleAutor user782860 | 2012-01-18

48

Den viewBox ist nicht die Höhe der container, es ist die Größe der Zeichnung. Definieren Sie Ihre viewBox zu 100 Einheiten in der Breite, dann definieren Sie Ihre rect zu 10 Einheiten. Nach, dass, egal wie groß Sie skaliert die SVG, die rect werden 10% der Breite des Bildes.

Aber die Frage ist: Wie groß die SVG?
Die Skalierung geschieht automatisch, wenn Sie eine bestimmte Größe festlegen auf das SVG-Objekt, wie bereits geschehen in den code in die Frage. Hier ist eine korrigierte version des Beispiel.
Du hast Recht, große, eine, die tatsächlich funktioniert für mich. Ich denke, mein problem war die Höhe und Breite Eigenschaften in der svg-root-element.
ich habe einige kleinere tweaks, fiddle zu machen, dass die Größenänderung gezwungen werden, horizontal und vertikal, ohne das Seitenverhältnis zu erhalten, und machte es im IE funktioniert, während die Fiedel @robertc eingereicht war nicht. Hoffe, es wird helfen, jemand auf der Straße!
Standardmäßig das svg wird der Maßstab so groß wie möglich, so dass es vollständig sichtbar ist, aber bewahrt das Seitenverhältnis (also ein Quadrat viewBox nicht vollständig füllen einer rechteckigen Eltern). Wenn Sie wirklich wollen, um ihn zu zwingen, um vollständig zu bedecken den übergeordneten container hinzufügen preserveAspectRatio="none", um das SVG-element.

InformationsquelleAutor robertc
22

Angenommen ich habe eine SVG, die wie folgt aussieht:

Und ich möchte es in ein div-Element und machen es füllt den div effizient. Mein Weg, es zu tun ist wie folgt:

Zuerst öffne ich die SVG-Datei in einer Anwendung wie inkscape. In Datei->Eigenschaften von Dokument ich die Breite des Dokuments auf 800px und die Höhe auf 600px (Sie können wählen, andere Größen). Dann passte ich die SVG in diesem Dokument.

Dann Speichere ich diese Datei als eine neue SVG-Datei und den Pfad abrufen, Daten aus dieser Datei.
Jetzt im HTML code, das macht den Zauber wie folgt:
```
<div id="containerId">    
    <svg
    id="svgId" 
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    x="0"
    y="0"
    width="100%"
    height="100%"
    viewBox="0 0 800 600"
    preserveAspectRatio="none">
       <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/>
    </svg>
</div>
```
Beachten Sie, dass Breite und Höhe der SVG-sind beide auf 100% gesetzt, da wollen wir es füllen Sie den Behälter vertikal und horizontal ,aber Breite und Höhe der viewBox sind die gleichen wie die Breite und Höhe des Dokuments in inkscape die 800px X 600px. Das nächste, was Sie tun müssen, ist, legen Sie die preserveAspectRatio auf "none". Wenn Sie brauchen, um mehr Informationen über dieses Attribut hier ist eine gute link. Und das ist alles dort ist zu ihm.

Eine weitere Sache ist, dass dieser code funktioniert auf fast allen gängigen Browsern, auch die alten, aber auf einigen Versionen von android und ios Sie verwenden müssen javascrip/jQuery-code konsistent halten. Ich verwende die folgenden, im Dokument bereit und resize-Funktionen:
```
$('#svgId').css({
    'width': $('#containerId').width() + 'px',
    'height': $('#containerId').height() + 'px'
});
```
Hoffe, es hilft!

+1 für die preserveAspectRatio Hinweis. Nach der Jagd hoch und niedrig, um eine SVG -, sich tatsächlich zu dehnen (nicht skalieren), um ein div, das war die richtige Antwort.
Vielen Dank für diese wundervolle Antwort. habe eine Frage, auf die gleichen. Was ist, wenn mein svg ist verschachtelt. für z.B.: <svg> <svg id="1"></svg> <svg id="2"></svg> </svg> ich möchte zur Anzeige von svg 1 und 2 bedingt und es sollten Breite und Höhe des Containers. <div id="container" style="width:200px;height:200px;"></div> können Sie mir bitte helfen.
Baradaran: Genius.

InformationsquelleAutor Reza Baradaran Gazorisangi
4

Was hat bei mir vor kurzem entfernen Sie alle height="" und width="" Attribute aus der <svg> tag und alle untergeordneten tags. Dann können Sie die Skalierung mit Prozentsatz des übergeordneten Containers der Höhe oder Breite.

Können Sie uns ein Beispiel? Ich kann nicht ankommen dieses zu tun.

InformationsquelleAutor Geoff Colbath
2

@robertc hat er Recht, aber Sie müssen auch feststellen, dass svg, #container Ursachen der svg skaliert exponentiell für nichts, aber 100% (einmal für #container und einmal für svg).

In anderen Worten, wenn ich angewendet, 50% h/B, um beide Elemente, es ist eigentlich 50% von 50%, oder .5 * .5, entspricht .25, - oder 25% - Skala.

Einen Selektor funktioniert, wenn verwendet, wie @robertc schlägt.
```
svg {
  width:50%;
  height:50%;
}
```
Das ist, weil Ihr selector svg, #container entspricht beide die svg dom-element und die #container dom-element. Ich glaube, Sie waren stattdessen der Suche nach svg #container, aber die Spezifikation eines Elternteils ist nicht erforderlich, wenn Sie eine ID sowieso.
Ist das nicht genau das, was ich gesagt habe, "einmal für #container und einmal für svg"?
Oh pardon, du hast Recht, aber deine Antwort ist etwas seltsam formuliert führt zu Missverständnissen. Es klingt so, als wenn Sie im Gespräch über eine mögliche gotcha auf den ersten.

InformationsquelleAutor Justin Putney
1

Für Ihr iphone, die Sie verwenden könnte, in Ihrem Kopf balisen :
```
"width=device-width"
```
InformationsquelleAutor vincent

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.