使svg缩放到全屏大小

Question

我试图将svg缩放到浏览器窗口的完整大小.svg对象在div中,高度和宽度都设置为100%我试过用svg里面的viewBox玩无济于事.

我使用的屏幕具有1080p res.

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

viewBox ="0 0 1920 1000"

使用这些设置,svg将以正常大小显示,并且不会缩放到窗口大小.

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

Answer 1

本文详细介绍了自适应svg，网址为
http://tympanus.net/codrops/2014/08/19/making-svgs-sensitive-with-css/

Answer 2

我觉得你误解了它是如何viewBox运作的.它应该描述SVG内容的尺寸,而不是屏幕.目的viewBox是告诉浏览器图形内容的大小,因此它知道需要多少才能缩放它以适应父容器.

所以你需要找到地图的minX,minY,宽度和高度.如果它是我通过谷歌搜索找到的相同文件,那么看起来正确的viewBox是:viewBox="0 0 1010 666".试试吧.