SVG mobile orientation change

Question

I'm working on an SVG and so far all is well, except for one issue.

Normally, in the absence of width/height attributes on the root element, the SVG will scale to fill the viewport.

However on mobile, I notice that changing orientation breaks this functionality. When rotating from portrait to landscape, the original screen width becomes the width of the viewport and the SVG goes way off the bottom. Rotating back gives the opposite problem, resulting in a very small SVG.

This does not happen on desktop, when resizing the browser window - the SVG correctly adjusts its scale so it fills the available space.

How can I force the SVG scale to recalculate correctly when screen orientation changes?

I assume by "on mobile" you don't mean every browser on every OS :) Which browser/OS combination are you using? — Paul LeBeau, Sep 22 '16 at 15:21
@PaulLeBeau Ah, good point. I've experienced the issue in Chrome on Android (HTC10 phone) — Niet the Dark Absol, Sep 22 '16 at 15:53

score 1 · Accepted Answer · answered Sep 23 '16 at 11:22

1

The issue has been resolved by forcing a redraw. This can be done by performing any operation that causes the SVG to change somehow, even if that "change" is a no-op.

In this case...

window.addEventListener('resize',function() {
    svg.setAttribute("x",0);
});

... worked just fine.

answered Sep 23 '16 at 11:22

Niet the Dark Absol

320,036
81
464
592

I am curious if this is still the best solution. I am facing the same issue for svg plots generated by https://metricsgraphicsjs.org/ and want to avoid manually forcing a redraw – hashbrown Apr 03 '19 at 10:41

SVG mobile orientation change

1 Answers1

Linked