Question

因此，当我的网络应用响应时，我遇到了麻烦。我设法做到这一点，以便SVG在调整宽度时适应，但我遇到了高度问题。

我为高度调整大小提出的最佳解决方案是以下js / jQuery代码：

        function updateWindow(){
            var y = (($(window).height()));
            svgMap.style.height=y;
        }
        updateWindow();
        window.onresize = updateWindow;

这样做是将SVG视口高度设置为等于窗口的高度。这在某种意义上说它使SVG与浏览器窗口的高度居中。不是很优秀，它在移动设备上搞砸了，几乎增加了一个奇怪的上边距。除非我将“y”乘以大于1的某个值，否则它也会使SVG略小。但是，这样做会增加保证金最高的差距。多么麻烦..

您可以在此处查看演示： http://zadias.me/SVG/Harrison%20Wilson/HarrisonWils.html

并且高度中心的演示在此处更改：http://zadias.me/SVG/Harrison%20Wilson/HarrisonWils%20-%20Copy.html

总结一下，如何在水平和垂直方向上将SVG置于<object>标签内。另外，我希望它能让SVG地图本身填充包装容器。

感谢任何帮助，谢谢。

编辑：所以我已经放弃尝试让它适合父母的身高......相反，我只是写了一些JS，如果身高太高，会提示用户发出警告小，它会导致页面溢出。我也做了它，以便通过向每个页面添加内联CSS以及媒体查询来完美地设计样式。

Answer 1

如果将SVG的宽度和高度设置为100％，即：

<svg width="100%" height=="100%">...

那么它应该只是调整SVG所在容器的大小。然后，“xMidYMid meet”的preserveAspectRatio设置应该垂直居中。

SVG调整窗口大小的高度，也是父级的中心

1 个答案: