Wie kann ein <svg> -Element in seinem übergeordneten Container erweitert oder verkleinert werden?

Ziel ist es, das <svg>Element auf die Größe seines übergeordneten Containers zu erweitern, in diesem Fall a <div>, egal wie groß oder klein dieser Container sein mag.

Der 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 darin zu bestehen, das viewBoxAttribut für das <svg>Element festzulegen.

viewBox="0 0 widthOfContainer heightOfContainer"

Dies scheint jedoch nicht zu funktionieren, wenn Elemente innerhalb des <svg>Elements vordefinierte Breiten und / oder Höhen haben. Beispielsweise werden für das <rect>Element im obigen Code Breite und Höhe explizit festgelegt.

Die naheliegende Lösung besteht also darin, auch für diese Elemente% widths und% height zu verwenden. Aber muss das überhaupt gemacht werden? Zumal es gut <img src=test.svg >funktioniert und sich ohne Probleme mit explizit eingestellten <rect>Höhen und Breiten problemlos ausdehnt / zusammenzieht .

Wenn Elemente wie <rect>und andere Elemente wie diese ihre Breiten und Höhen in Prozent definieren müssen, gibt es in Inkscape eine Möglichkeit, sie so festzulegen, dass alle Elemente mit dem <svg>Dokument prozentuale Breiten, Höhen usw. anstelle fester Abmessungen verwenden ?

Das viewBoxist nicht die Höhe des Containers, sondern die Größe Ihrer Zeichnung. Definieren Sie viewBoxeine Breite von 100 Einheiten rectund eine Einheit von 10 Einheiten. Unabhängig davon, wie groß Sie das SVG skalieren, beträgt rectdie Bildbreite 10%.

Angenommen, ich habe eine SVG, die so aussieht:

Und ich möchte es in ein Div einfügen und es das Div als Antwort füllen lassen. Meine Vorgehensweise ist wie folgt:

Zuerst öffne ich die SVG-Datei in einer Anwendung wie inkscape. Unter Datei-> Dokumenteigenschaften stelle ich die Breite des Dokuments auf 800 Pixel und die Höhe auf 600 Pixel ein (Sie können andere Größen auswählen). Dann passe ich die SVG in dieses Dokument ein.

Dann speichere ich diese Datei als neue SVG-Datei und erhalte die Pfaddaten aus dieser Datei. In HTML lautet der Code, der die Magie ausübt, 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 von SVG beide auf 100% festgelegt sind, da der Container vertikal und horizontal gefüllt werden soll. Breite und Höhe der Ansichtsbox entsprechen jedoch der Breite und Höhe des Dokuments in inkscape (800 x X) 600px. Als nächstes müssen Sie daserveAspectRatio auf "none" setzen. Wenn Sie weitere Informationen zu diesem Attribut benötigen, finden Sie hier einen guten Link . Und das ist alles.

Eine weitere Sache ist, dass dieser Code auf fast allen gängigen Browsern funktioniert, auch auf den alten. Bei einigen Versionen von Android und iOS müssen Sie jedoch Javascrip / jQuery-Code verwenden, um die Konsistenz zu gewährleisten. Ich verwende die folgenden Funktionen für Dokumentbereitschaft und Größenänderung:

$('#svgId').css({
    'width': $('#containerId').width() + 'px',
    'height': $('#containerId').height() + 'px'
});

Ich hoffe es hilft!

Was in letzter Zeit für mich funktioniert hat, ist, alle height=""und width=""Attribute aus dem <svg>Tag und allen untergeordneten Tags zu entfernen . Anschließend können Sie die Skalierung anhand eines Prozentsatzes der Höhe oder Breite des übergeordneten Containers verwenden.

@robertc hat es richtig gemacht, aber Sie müssen auch beachten, svg, #containerdass das SVG exponentiell für alles andere als 100% skaliert wird (einmal für #containerund einmal für svg).

Mit anderen Worten, wenn ich 50% h / w auf beide Elemente angewendet habe, sind es tatsächlich 50% von 50% oder 0,5 * 0,5, was einer Skala von 0,25 oder 25% entspricht.

Ein Selektor funktioniert einwandfrei, wenn er wie von @robertc vorgeschlagen verwendet wird.

svg {
  width:50%;
  height:50%;
}

Für Ihr iPhone könnten Sie in Ihrem Kopf balise verwenden:

"width=device-width"