1

The example in the MDN documentation renders without scroll bars in Chrome 86.0.4240.198 .

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto">
  <text y="20">This text is wider than the SVG, so there should be a scrollbar shown.</text>
</svg>

No scroll bars on SVG overflow scroll

I have changed the example to overflow="scroll" and it still does not work correctly (i.e. it does not show scroll bars). Is there a work around?

AJP
  • 26,547
  • 23
  • 88
  • 127
  • No browser currently supports scrollbars on SVG currently I believe. – Robert Longson Nov 24 '20 at 17:29
  • You can fit the text inside the svg element if you change the viewBox value according to the computed text length: `svg.setAttribute("viewBox",`0 0 ${text.getComputedTextLength()} 30`)` – enxaneta Nov 25 '20 at 08:17
  • Thank you @RobertLongson . Do you want to add that as an answer? – AJP Nov 25 '20 at 08:26
  • Thank you @enxaneta . In this case it's text but in the example I'm working with I wanted to have some shapes and charts displayed correctly. – AJP Nov 25 '20 at 08:27
  • You can get the bounding box of the shape using `let bb = theShape.getBBox()`. Next you can set the `viewBox = "bb.x bb.y bb.width bb.height"` – enxaneta Nov 25 '20 at 08:35

1 Answers1

0

This solution does not answer the question directly but works well as a work around: https://stackoverflow.com/a/11449016/539490

Specifically put the SVG in a div, and let the div handle the overflow.

    div {
      overflow: scroll;
    }

    <div>
      <svg></svg>
    </div>
AJP
  • 26,547
  • 23
  • 88
  • 127