SVG移动方向改变

SVG mobile orientation change

本文关键字：改变方向移动 SVG 更新时间：2023-09-26

我正在制作SVG，到目前为止一切都很好，除了一个问题。

通常，在根元素上没有宽度/高度属性的情况下，SVG将缩放以填充视口。

但是在移动设备上，我注意到改变方向会破坏这个功能。当从纵向旋转到横向时，原始屏幕宽度变成了视口的宽度，而SVG则远离底部。向后旋转会产生相反的问题，导致SVG非常小。

这种情况不会发生在桌面，当调整浏览器窗口的大小时- SVG会正确调整其大小以填充可用空间。

当屏幕方向改变时，我如何强制SVG缩放正确重新计算?

这个问题已经通过强制重划得到解决。这可以通过执行任何导致SVG以某种方式更改的操作来实现，即使该"更改"是无操作的。

在这种情况下…

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

…