Wie kann ich eine Inline-SVG-Skalierung mit dem übergeordneten Container erstellen?

Skalieren von Inline-SVG mit seinem übergeordneten Container

Das Einbinden von Inline-SVG-Elementen in HTML-Code bietet den Vorteil, dass sie mit CSS gestaltet werden können. Allerdings kann es eine Herausforderung sein, solche SVG-Elemente so zu skalieren, dass sie den Abmessungen ihres übergeordneten Containers entsprechen.

Lösung

Eine Inline-SVG mit ihrem übergeordneten Container zu skalieren, ist eine Herausforderung Es ist erforderlich, das viewBox-Attribut in Verbindung mit den Breiten- und Höhenattributen zu verwenden:

1. viewBox-Attribut: Dieses Attribut definiert den Begrenzungsrahmen des SVG-Bildes innerhalb seines eigenen Koordinatensystems. Es legt das Seitenverhältnis und die anfänglichen Abmessungen des SVG-Bildes fest. Durch Festlegen dieses Attributs können Sie die Koordinaten innerhalb des SVG-Bildes unabhängig von seiner skalierten Größe angeben.
2. Breite- und Höhenattribute:Diese Attribute geben die Breite und Höhe des SVG-Elements innerhalb des an enthaltende Seite. Sie steuern die Größe des SVG-Bildes, wie es auf der Seite angezeigt wird. Indem Sie diese Attribute relativ zu den Abmessungen des Containers festlegen (z. B. mithilfe von Prozentsätzen), können Sie das SVG-Bild proportional skalieren.

Bedenken Sie beispielsweise den folgenden Code:

<svg viewBox="0 0 123 456" width="100%" height="100%">
  <polygon fill="red" stroke-width="0" points="0,10 20,10 10,0" />
</svg>

In diesem Beispiel wird das SVG-Bild mit einer nativen Größe von 123 x 456 Pixel so skaliert, dass es den gesamten Container ausfüllt. Das viewBox-Attribut definiert die Koordinaten des Polygons innerhalb des SVG-Bildes selbst, während die Attribute width und height das SVG-Bild an die Abmessungen des Containers skalieren. Dadurch wird das Polygon als 100 % breites rotes Dreieck innerhalb des Containers gerendert.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Inline-SVG-Skalierung mit dem übergeordneten Container erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!