0

所以我在让我的网络应用程序响应时遇到了麻烦。我已经设法使 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 以及媒体查询来完美地设置它的样式。

4

1 回答 1

0

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

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

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

于 2013-07-31T08:40:06.647 回答