Wie skaliere ich Inline-SVGs so, dass sie in ihre übergeordneten Container passen und gleichzeitig das Seitenverhältnis beibehalten?

Inline-SVGs skalieren, um sie an übergeordnete Container anzupassen

Inline-SVGs bieten die Flexibilität, Vektorgrafiken direkt zu HTML-Dokumenten hinzuzufügen. Allerdings kann es eine Herausforderung darstellen, sie an die Größe des übergeordneten Containers anzupassen und gleichzeitig das Seitenverhältnis beizubehalten. So erreichen Sie dies mit dem viewBox-Attribut:

Um eine Inline-SVG-Skalierung zu erstellen, verwenden wir das viewBox-Attribut für das SVG-Element. Dieses Attribut definiert den Begrenzungsrahmen des Bildes innerhalb seines eigenen Koordinatensystems. Anschließend geben wir die gewünschte Breite und Höhe mithilfe der Attribute width und height an, die relativ zur enthaltenen Seite sind.

Betrachten Sie das folgende Beispiel, das ein 10 x 20 Pixel großes Dreieck anzeigt:

<svg viewBox="0 0 20 10">
    <polygon fill="red" stroke-width="0"
             points="0,10 20,10 10,0" />
</svg>

Dieses SVG wird unabhängig von seiner Größe als 10 x 20 Pixel großes Dreieck innerhalb des angegebenen Containers gerendert. Das viewBox-Attribut (0 0 20 10) definiert das Koordinatensystem des Bildes, wobei (0,0) die obere linke Ecke und (20,10) die untere rechte Ecke ist. Durch Angabe der Breiten- und Höhenattribute (im Beispiel nicht gezeigt) skalieren wir das Bild auf die gewünschte Größe relativ zum Container und behalten dabei das Seitenverhältnis bei.

Das obige ist der detaillierte Inhalt vonWie skaliere ich Inline-SVGs so, dass sie in ihre übergeordneten Container passen und gleichzeitig das Seitenverhältnis beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!