Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann man SVG-Elemente mit ihrem übergeordneten Container erweitern und verkleinern?

Patricia Arquette
Freigeben: 2024-10-30 18:19:30
Original
868 Leute haben es durchsucht

How to Make SVG Elements Expand and Contract with Their Parent Container?

SVG-Element zum übergeordneten Container erweitern und verkleinern

Die Herausforderung besteht darin, sicherzustellen, dass sich ein SVG-Element erweitert oder verkleinert, um den Abmessungen seines übergeordneten Containers zu entsprechen. unabhängig von der Containergröße.

Häufige Lösung: viewBox

Eine beliebte Lösung besteht darin, das viewBox-Attribut für das SVG-Element festzulegen. Dies ist jedoch möglicherweise nicht effektiv, wenn untergeordnete Elemente innerhalb der SVG-Datei feste Breiten oder Höhen haben.

Prozentbasierte Elementabmessungen

Ein alternativer Ansatz ist die Verwendung von Prozent- basierende Breiten und Höhen für Elemente innerhalb der SVG. Dies spiegelt das Verhalten eingebetteter SVGs wider, die verwenden und sich unabhängig von bestimmten Elementabmessungen nahtlos erweitern und verkleinern.

Einstellung des Inkscape-Prozentsatzes

Wenn Prozentbasierte Abmessungen werden bevorzugt. Erwägen Sie, die Standardeinstellungen von Inkscape zu ändern. Suchen Sie die Option „Skalieren“ im Menü „Objekt“ und aktivieren Sie „Skalieren nach: Prozentsatz“. Dadurch wird sichergestellt, dass alle im SVG erstellten Elemente prozentuale Abmessungen haben.

Beispielcode mit prozentualen Abmessungen

Hier ist ein aktualisiertes Codebeispiel:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="10%" height="10%" />
    </svg>
</div>
Nach dem Login kopieren

Dadurch wird sichergestellt, dass sich das Rechteck innerhalb der SVG proportional zu den Abmessungen seines übergeordneten Containers ausdehnt und zusammenzieht.

Das obige ist der detaillierte Inhalt vonWie kann man SVG-Elemente mit ihrem übergeordneten Container erweitern und verkleinern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!