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

我认为你误解了viewBox的工作原理。它应该描述 SVG内容的尺寸，而不是屏幕。 viewBox的目的是告诉浏览器图形内容的尺寸，因此它知道需要多少才能缩放它以适合父容器。

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

Answer 2

本文详细介绍了响应式svg http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

使svg缩放到全屏大小

2 个答案: