Wie kann ich ein Inline-SVG so skalieren, dass es in den übergeordneten Container passt?

So skalieren Sie ein Inline-SVG-Element

In bestimmten Szenarien müssen Entwickler möglicherweise ein Inline-SVG-Bild dynamisch skalieren, um es an die Größe anzupassen sein übergeordneter Container. Dies kann ohne Verweis auf eine externe SVG-Datei erreicht werden und ermöglicht die Anwendung zusätzlicher CSS-Stile auf den SVG-Inhalt.

Um ein Inline-SVG zu skalieren, führen Sie die folgenden Schritte aus:

1. Geben Sie das Viewbox-Attribut an:
   Definieren Sie den Begrenzungsrahmen des Bildes innerhalb seines Koordinatensystems mithilfe des viewBox-Attributs im SVG-Element. Die Werte stellen die X- und Y-Koordinaten der oberen linken Ecke und der unteren rechten Ecke des SVG dar.
2. Legen Sie die Breiten- und Höhenattribute fest:
   Geben Sie die Breite und Höhe an der SVG-Datei, wie sie auf der enthaltenden Seite erscheinen soll, unter Verwendung der Breiten- und Höhenattribute. Diese Werte bestimmen, wie das SVG proportional skaliert wird.

Der folgende Code rendert beispielsweise ein Dreieck innerhalb eines 10 x 20 Pixel großen Begrenzungsrahmens, das dann so skaliert wird, dass es in den übergeordneten Container passt:

svg {
  border: 1px solid blue;
}

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

Durch die Angabe der Koordinaten innerhalb der SVG-Datei unabhängig von der skalierten Größe behält das Bild seine Proportionen bei und wird unabhängig vom Container korrekt gerendert Größe.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Inline-SVG so skalieren, dass es in den übergeordneten Container passt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!