使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 发送到该位置的结果也会出现偏差。

- Ernie

---

尝试使用“html，body {height：100％; }” - Richard Foster

还是没有运气，仍然显示相同的内容。 - Ernie

Answer 1

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

因此，您需要找到地图的 minX、minY、width 和 height。如果它是我在谷歌上找到的同一个文件，那么正确的 viewBox 应该是：viewBox="0 0 1010 666"。可以试试这个。

- Paul LeBeau

---

viewBox近乎完美，但还有一些问题。现在我已经大致正确地显示了它，通过访问svg内的ID获取屏幕上的位置并将div移动到该位置，但仍然会将其移动到当地图是其默认大小时所在的位置。因此，地图坐标没有随地图缩放。 - Ernie

你需要在SVG坐标和屏幕坐标之间进行转换。有多种方法可以实现。 - Paul LeBeau

Answer 2

这篇文章详细介绍了响应式SVG相关的内容。
http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

- Vivek Kumar Bansal

---

你尝试过文章中提到的任何技术吗？ - Vivek Kumar Bansal

我遇到了这个问题，解决方案是将两者结合起来，并设置正确的viewBox设置。 - Ernie