SVGモバイルオリエンテーションの変更

Question

私はSVGに取り組んでいます。これまでのところ、1つの問題を除いてすべてがうまくいきます。

通常、ルート要素にwidth/height属性がない場合、SVGは、ビューポートを埋めるようにスケーリングされます。

しかし、モバイルでは、向きを変えるとこの機能が損なわれます。肖像画から風景に回転するとき、元の画面の幅はビューポートの幅になり、SVGは底から外れます。逆に回転すると反対の問題が生じ、SVGが非常に小さくなります。

ブラウザウィンドウのサイズを変更すると、これはデスクトップ上では起こりません。SVGは、使用可能なスペースを満たすようにスケールを正しく調整します。

画面の向きが変わったときにSVGスケールを正しく再計算するにはどうすればよいですか？

Answer 1

問題は再描画を強制することで解決されました。これは、たとえ "変更"がノーオペレーションであっても、何らかの形でSVGを変更させる任意の操作を実行することによって行うことができます。この場合

...

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

は...うまく働きました。