Wie erreicht man eine reaktionsfähige SVG-Skalierung innerhalb übergeordneter Container: Lösung des ViewBox-Dilemmas?

SVG-Skalierungsprobleme innerhalb übergeordneter Container lösen

Frage:

Wie kann ein SVG-Element so konfiguriert sein, dass es sich innerhalb seines übergeordneten Containers ausdehnt oder zusammenzieht, unabhängig von der Größe des Containers? Trotz des Versuchs der üblichen Lösung, das viewBox-Attribut festzulegen, bleibt das Verhalten inkonsistent, wenn Elemente innerhalb der SVG vordefinierte Abmessungen haben.

Antwort:

Die Hauptursache der Skalierung Das Problem liegt in der viewBox-Definition. Die viewBox stellt die Größe der SVG-Zeichnung dar, nicht den Container. Um eine reaktionsfähige Skalierung zu erreichen, sollte die ViewBox in Breiteneinheiten definiert werden und die internen Elemente, wie in diesem Fall das Rechteck, sollten als Prozentsätze der ViewBox definiert werden.

Zum Beispiel, wenn die ViewBox ist auf „100 0 100 100“ eingestellt ist, sollten die Breite und Höhe des Rechtecks ​​als „10 %“ definiert werden. Auf diese Weise bleibt das Rechteck unabhängig von der Größe des übergeordneten Containers immer bei 10 % der gesamten SVG-Breite.

Inkscape-Konfiguration:

Leider ist dies bei Inkscape der Fall Derzeit gibt es keine Option, alle Elemente in einem SVG-Dokument so einzustellen, dass sie ausschließlich Prozentmaße verwenden. Dies muss für jedes Element manuell erfolgen.

Das obige ist der detaillierte Inhalt vonWie erreicht man eine reaktionsfähige SVG-Skalierung innerhalb übergeordneter Container: Lösung des ViewBox-Dilemmas?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!