javascript - 使 svg 缩放到全屏大小

Question

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

我使用的屏幕分辨率为 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 发送到该位置不是它应该在的位置。

Answer 1

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

所以需要求出 map 的minX、minY、宽高。如果它是我通过谷歌搜索找到的同一个文件，那么看起来正确的 viewBox 是:viewBox="0 0 1010 666"。试试看。