我正在尝试将svg缩放到浏览器窗口的完整大小。
svg对象位于div内,高度和宽度均设置为100%
我试过在svg内使用viewBox,但无济于事。

Im正在使用的屏幕分辨率为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>

viewBox =“0 0 1920 1000”

通过这些设置,svg将以其正常大小显示,并且不会缩放到窗口大小。

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

最佳答案

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

因此,您需要找到 map 的minX,minY,宽度和高度。如果它与我通过Googling找到的文件相同,则看起来正确的viewBox是:viewBox="0 0 1010 666"。试试看

10-05 21:01
查看更多