使svg缩放到全屏尺寸 [英] Make svg scale to full screen size

问题描述

我试图将svg缩放到浏览器窗口的全部大小。
svg对象在div中，高度和宽度都设置为100％
我尝试使用svg中的viewBox无效。

使用的屏幕具有1080p分辨率。

 < div style =width：100％; height：100 ％;> 
< object id =maptype =image / svg + xmldata =worldHigh.svg>您的浏览器不支持SVG< / object> 
< / div> 
  

viewBox =0 0 1920 1000

使用这些设置，svg以其正常大小显示，并且不会缩放到窗口的大小。

当我在svg中设置宽度和高度时，我可以获得它到显示器的大小，然后路径的坐标是错误的，发送一个div到那个地方并不是它应该在的地方。

解决方案

我认为你误解了 viewBox 的工作原理。它应该描述 SVG内容的尺寸，而不是屏幕的尺寸。 viewBox 的目的是告诉浏览器图形内容的尺寸，所以它知道需要调整它以适应父容器的大小。

所以你需要找到地图的minX，minY，宽度和高度。如果它与我通过Google搜索到的文件相同，那么它看起来像正确的viewBox是： viewBox =0 0 1010 666。试试看。

Im trying to scale a svg to the full size of the browser window. The svg object is inside a div with both height and width set to 100% I have tried playing with the viewBox inside the svg to no avail.

The screen Im using has a 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"

With these settings the svg displays with its normal size and does not scale to the size of the window.

When I set the width and height in the svg I can get it to the size of the display yet then the coordinates of the paths is wrong and sending a div to that spot is not where it should be.

解决方案

I think you are misunderstanding how viewBox works. It should describe the dimensions of your SVG contents, not your screen. The purpose of viewBox is to tell the browser the dimensions of the graphic content, so it knows how much it needs to scale it to fit the parent container.

So you need to find the minX, minY, width and height of the map. If it's the same file I found by Googling, then it looks like the correct viewBox is: viewBox="0 0 1010 666". Try that.

这篇关于使svg缩放到全屏尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！