CODEWITHSUNDEEP
csshtmlsvgscrolloverflow
Ivan
Ivan

Reputation: 183

How to make overflow-ed SVG content viewable via scrolling?

I have this simple HTML:

<html>
  <body>
    <embed src="test.svg" type="image/svg+xml" style="border:3px solid green;width:200px;height:200px;overflow:scroll;">
  </body>
</html>

And a simple SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" style="border:3px solid red;width:500px;height:500px;overflow:auto;">
  <circle cx="50" cy="250" r="80" stroke="green" stroke-width="4" fill="yellow" />
</svg>

The output from browsers:

  1. [1,1] Edge: OK
  2. [2,1] IE11: OK
  3. [1,2] Chrome55: Not scrollable
  4. [2,2] Firefox50: Scrollable at a negligible degree

SVG Overflow

How to ensure Firefox and Chrome able to have scrollable <embed> with overflow-ed SVG content, as in Edge and IE?

Thank you.

Upvotes: 2

Views: 3648

Answers (1)

Holger Will
Holger Will

Reputation: 7526

just put a div around the embed und use that as scrolling area...

<html>

<body>
  <div style="border:3px solid green;width:100px;height:100px;overflow:scroll;">
    <embed src="https://upload.wikimedia.org/wikipedia/commons/e/e9/SVG-Grundelemente.svg" type="image/svg+xml">
  </div>
</body>

</html>

to match the behaviour of MS browsers, you have to extend your viewBox to contain all elements you want to be able to scroll to... given the appropiate width and height should do want you want then...

You can as well roll your own zoom and pan solution using svgDocuments currentTranslate and currentScale properties... I would be curious how currentTranslate behaves for this weird MS behaviour...

Upvotes: 4

Related Questions