Wie skaliere ich Inline-SVGs proportional zu ihrem übergeordneten Container?

Inline-SVGs proportional mit dem übergeordneten Container skalieren

Die Skalierung einer Inline-SVG im Verhältnis zum übergeordneten Container ist eine praktische Möglichkeit, die Größe von SVGs dynamisch zu ändern Inhalt. Dies ist wünschenswert, wenn Sie SVG-Grafiken in HTML-Elemente einbetten und sicherstellen müssen, dass sie entsprechend skaliert werden. So erreichen Sie dies:

<svg viewbox="0 0 100 50">
  <polygon fill="red" points="0,0 100,0 50,50"></polygon>
</svg>

In diesem Beispiel hat das SVG-Element eine Breite von 100 und eine Höhe von 50, wie durch das viewBox-Attribut definiert. Das Polygonelement stellt ein Dreieck dar, das sich über die gesamte Breite und Höhe der SVG-Datei erstreckt.

Das viewBox-Attribut gibt die Koordinaten des SVG-Inhalts an. In diesem Fall reichen die Koordinaten von 0 bis 100 horizontal und 0 bis 50 vertikal. Selbst wenn Sie die Größe des SVG-Elements mithilfe von CSS ändern, füllt das Dreieck immer den gesamten viewBox-Bereich aus.

svg {
  width: 300px; /* Can be any value */
  height: auto; /* Automatically scales height */
}

Durch Festlegen der Breite des SVG-Elements können wir die gewünschte Größe des enthaltenden Elements festlegen. Die Höhe wird automatisch angepasst, um das Seitenverhältnis der SVG beizubehalten und sicherzustellen, dass das Dreieck proportional skaliert bleibt.

Mit diesem Ansatz können Sie SVGs in HTML-Elemente einbetten und deren Größe dynamisch steuern, ohne externe Dateien zu verwenden oder auf Stil zu verzichten Optionen.

Das obige ist der detaillierte Inhalt vonWie skaliere ich Inline-SVGs proportional zu ihrem übergeordneten Container?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!