SVG在窗口调整大小时调整高度，也以父级为中心答案

【问题标题】：SVG resizing height on window resize, also center to parentSVG在窗口调整大小时调整高度，也以父级为中心
【发布时间】：2017-02-10 04:29:09
【问题描述】：

所以我在让我的网络应用程序响应时遇到了麻烦。我已经设法让 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

总而言之，如何在<object> 标签中水平和垂直地居中SVG。另外，我希望 SVG 地图本身填充包装容器。

感谢您的帮助。

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

【问题讨论】：

标签： javascript jquery svg

【解决方案1】：

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

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

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

【讨论】：

仍然没有垂直缩放..我什至尝试将width="100%" height="100%"添加到源代码中的<object>，没有雪茄。
您想要垂直缩放？你的意思是你想让它水平和垂直拉伸？如果是这种情况，请使用preserveAspectRatio="none"。如果您希望它可以缩放以填充整个容器（意味着一些 svg 溢出并被剪裁），请使用 preserveAspectRatio="xMidYMid slice"。
我希望它适合窗口并完全被用户看到。正如你所说，我不想溢出/剪裁。我试过preserveAspectRatio="none"，没用。