javascript 使 svg 缩放到全屏大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25689678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make svg scale to full screen size
提问by Ernie
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.
我试图将 svg 缩放到浏览器窗口的完整大小。svg 对象位于高度和宽度均设置为 100% 的 div 内，我尝试在 svg 内使用 viewBox 无济于事。
The screen Im using has a 1080p res.
我使用的屏幕有 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"
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.
使用这些设置，svg 以其正常大小显示，不会缩放到窗口大小。
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.
当我在 svg 中设置宽度和高度时，我可以将其设置为显示器的大小，但是路径的坐标是错误的，并且将 div 发送到该位置不是它应该在的位置。
回答by Vivek Kumar Bansal
This article covers responsive svg in detail
http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/
本文详细介绍了响应式 svg
http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/
回答by Paul LeBeau
I think you are misunderstanding how viewBoxworks. It should describe the dimensions of your SVG contents, not your screen. The purpose of viewBoxis 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.
我认为您误解了viewBox工作原理。它应该描述您的SVG 内容的尺寸，而不是您的屏幕。的目的viewBox是告诉浏览器图形内容的尺寸，因此它知道需要将其缩放多少以适应父容器。
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.
所以你需要找到地图的minX、minY、宽度和高度。如果它与我通过谷歌搜索找到的文件相同，那么正确的 viewBox 看起来是：viewBox="0 0 1010 666". 试试那个。
