Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie füge ich Bildlaufleisten zu einem SVG-Element hinzu, wenn der Überlauf nicht funktioniert?

Patricia Arquette
Freigeben: 2024-10-26 00:20:02
Original
508 Leute haben es durchsucht

How to Add Scrollbars to an SVG Element When Overflow Is Not Working?

Überwindung des Fehlens von Bildlaufleisten in SVG-Elementen

Ihre Anfrage bezieht sich auf das Hinzufügen von Bildlaufleisten zu einem SVG-Element, das mehrere Inhaltselemente enthält und über eine verfügt Viewbox-Attribut. Obwohl das Überlaufattribut sowohl zum SVG-Element als auch zum umgebenden Div hinzugefügt wurde, fehlen Bildlaufleisten.

Lösung:

Die Lösung besteht darin, das SVG-Element größer als das zu machen div-Container. Diese Anpassung ermöglicht es dem Div, den Überlauf zu verwalten und Bildlaufleisten zu implementieren.

Hier ist ein Beispiel aus einem jsfiddle:

<code class="css">div#container {
  height: 400px;
  width: 400px;
  border:2px solid #000;
  overflow: scroll;
}
svg#sky {
  height: 100px;
  width: 1100px;
  border:1px dotted #ccc;
  background-color: #ccc;
}</code>
Nach dem Login kopieren

Durch Ändern der SVG-Abmessungen so, dass sie die des Divs überschreiten, gibt es keinen Überlauf nicht mehr im SVG enthalten. Stattdessen erstreckt es sich über den Container hinaus und ermöglicht die Übernahme der Scroll-Funktionalität des Div.

Das obige ist der detaillierte Inhalt vonWie füge ich Bildlaufleisten zu einem SVG-Element hinzu, wenn der Überlauf nicht funktioniert?. 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!