Maison > interface Web > tutoriel CSS > le corps du texte

Comment ajouter des barres de défilement à un élément SVG lorsque le débordement ne fonctionne pas ?

Patricia Arquette
Libérer: 2024-10-26 00:20:02
original
508 Les gens l'ont consulté

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

Surmonter l'absence de barres de défilement dans les éléments SVG

Votre requête concerne l'ajout de barres de défilement à un élément SVG qui contient plusieurs éléments de contenu et a un attribut viewbox. Malgré l'ajout de l'attribut overflow à la fois à l'élément SVG et au div englobant, les barres de défilement restent absentes.

Solution :

La solution consiste à rendre l'élément SVG plus grand que le conteneur div. Cet ajustement permet au div de gérer le débordement et d'implémenter des barres de défilement.

Voici un exemple tiré d'un 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>
Copier après la connexion

En modifiant les dimensions du SVG pour dépasser celles du div, le débordement n'est pas possible. plus contenu dans le SVG. Au lieu de cela, il s'étend au-delà du conteneur, permettant à la fonctionnalité de défilement du div de prendre le relais.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!