Wie skaliere ich Inline-SVGs mithilfe von „viewBox', „width' und „height' so, dass sie in ihre übergeordneten Container passen?

Skalieren von Inline-SVGs mit übergeordneten Containern

Bei der Arbeit mit Inline-SVG-Elementen (Scalable Vector Graphics) stößt man häufig auf die Notwendigkeit, die SVG-Datei so zu skalieren, dass sie den Abmessungen von entspricht sein übergeordneter Container. Während es möglich ist, eine Skalierung durch Verweis auf eine externe SVG-Datei zu erreichen, kann dieser Ansatz die Möglichkeit einschränken, die SVG-Datei mithilfe von CSS zu formatieren. Daher ist es eine wünschenswertere Lösung, Inline-SVGs direkt zu skalieren.

Bildkoordinaten mit viewBox definieren und mit Breite/Höhe skalieren

Um die internen Koordinaten des SVG-Bilds zu definieren und zu bestimmen, wie es skaliert wird , verwenden Sie die folgenden Attribute:

• viewBox: Definiert den Begrenzungsrahmen des Bildes in seinem eigenen Koordinatensystem.
• Breite: Breite des SVG in Einheiten relativ zur enthaltenden Seite.
• Höhe: Höhe des SVG in Einheiten relativ zur enthaltenden Seite.

Betrachten Sie beispielsweise das folgende Inline-SVG mit einem Rot Dreieck:

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

Hier haben wir:

• viewBox (0, 0, 20, 10): Gibt an, dass die SVG einen rechteckigen Begrenzungsrahmen mit einer Breite von 20 hat Einheiten und eine Höhe von 10 Einheiten.
• Breite (10): Gibt an, dass das SVG im Verhältnis zum Inhalt 10 Einheiten breit sein soll Seite.
• Höhe (20): Gibt an, dass die SVG-Datei im Verhältnis zur enthaltenden Seite 20 Einheiten hoch sein soll.

Diese SVG-Datei wird als 10 Pixel breites und 20 Pixel hohes rotes Dreieck gerendert .

Das obige ist der detaillierte Inhalt vonWie skaliere ich Inline-SVGs mithilfe von „viewBox', „width' und „height' so, dass sie in ihre übergeordneten Container passen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!