Wie kann man SVG-Elemente mit ihrem übergeordneten Container erweitern und verkleinern?

SVG-Element zum übergeordneten Container erweitern und verkleinern

Die Herausforderung besteht darin, sicherzustellen, dass sich ein SVG-Element erweitert oder verkleinert, um den Abmessungen seines übergeordneten Containers zu entsprechen. unabhängig von der Containergröße.

Häufige Lösung: viewBox

Eine beliebte Lösung besteht darin, das viewBox-Attribut für das SVG-Element festzulegen. Dies ist jedoch möglicherweise nicht effektiv, wenn untergeordnete Elemente innerhalb der SVG-Datei feste Breiten oder Höhen haben.

Prozentbasierte Elementabmessungen

Ein alternativer Ansatz ist die Verwendung von Prozent- basierende Breiten und Höhen für Elemente innerhalb der SVG. Dies spiegelt das Verhalten eingebetteter SVGs wider, die verwenden und sich unabhängig von bestimmten Elementabmessungen nahtlos erweitern und verkleinern.

Einstellung des Inkscape-Prozentsatzes

Wenn Prozentbasierte Abmessungen werden bevorzugt. Erwägen Sie, die Standardeinstellungen von Inkscape zu ändern. Suchen Sie die Option „Skalieren“ im Menü „Objekt“ und aktivieren Sie „Skalieren nach: Prozentsatz“. Dadurch wird sichergestellt, dass alle im SVG erstellten Elemente prozentuale Abmessungen haben.

Beispielcode mit prozentualen Abmessungen

Hier ist ein aktualisiertes Codebeispiel:

<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="10%" height="10%" />
    </svg>
</div>

Dadurch wird sichergestellt, dass sich das Rechteck innerhalb der SVG proportional zu den Abmessungen seines übergeordneten Containers ausdehnt und zusammenzieht.

Das obige ist der detaillierte Inhalt vonWie kann man SVG-Elemente mit ihrem übergeordneten Container erweitern und verkleinern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!