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

Overcoming the Absence of ScrollBars in SVG Elements

Your query pertains to adding scrollbars to an SVG element that contains multiple content items and has a viewbox attribute. Despite adding the overflow attribute to both the SVG element and the encompassing div, scrollbars remain absent.

Solution:

The solution lies in making the SVG element larger than the div container. This adjustment allows the div to manage the overflow and implement scrollbars.

Here's an example from a 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>

By modifying the SVG's dimensions to exceed those of the div, overflow is no longer contained within the SVG. Instead, it extends beyond the container, allowing the div's scroll functionality to take over.

The above is the detailed content of How to Add Scrollbars to an SVG Element When Overflow Is Not Working?. For more information, please follow other related articles on the PHP Chinese website!