使svg缩放至全屏大小

我试图缩放svg至浏览器窗口的全部大小。 svg对象是在一个div的高度和宽度都设置为100％我试图玩svg里面的viewBox无济于事。使svg缩放至全屏大小

我使用的屏幕有1080p分辨率。

<div style="width:100%; height: 100%;"> 
     <object id="map" type="image/svg+xml" data="worldHigh.svg">Your browser does not support SVG</object> 
    </div>

视框=“0 0 1920 1000”

通过这些设置的SVG显示具有正常大小并且不扩展到所述窗口的尺寸。

当我在svg中设置宽度和高度时，我可以将其设置为显示的大小，然后路径的坐标是错误的，并且发送一个div到该位置不是它应该在的位置。

来源

2014-09-05 Ernie

试试'html，body {height：100％; }' – 2014-09-05 15:52:59

没有运气仍然显示相同 – Ernie 2014-09-05 15:59:05

我想你是误会了如何viewBox作品响应SVG。它应该描述您的SVG内容的尺寸，而不是您的屏幕。 viewBox的目的是告诉浏览器图形内容的尺寸，因此它知道需要调整它以适应父容器需要多少。

所以你需要找到地图的minX，minY，宽度和高度。如果它与Google搜索到的文件相同，那么它看起来像正确的viewBox是：viewBox="0 0 1010 666"。试试看。

来源

2014-09-06 04:55:27

viewBox接近但不完美，谢谢。现在我已经或多或少地显示了正确的访问svg中的id并获得屏幕上的位置并将div移动到它仍然将它移动到它在地图是其默认大小时所做的位置。因此，地图坐标不会与地图匹配 – Ernie 2014-09-08 07:21:19

您需要在SVG坐标和屏幕坐标之间进行转换。有办法做到这一点。 – 2014-09-08 07:37:24

本文将详细介绍
http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

来源

2014-09-05 17:21:12

尼斯读的感谢 – Ernie 2014-09-08 07:17:05

您是否尝试过任何文章中提到的技术？ – 2014-09-09 04:54:55

我有和解决方案是混合的，并设置正确的viewBox设置 – Ernie 2014-09-09 11:28:37

使svg缩放至全屏大小

回答

相关问题