使内联svg填满整个屏幕 [英] Making inline svg fill whole screen
问题描述
我已经购买了一个svg图形，我已经导出到.svg文件，以便它可以在内联HTML中使用。我已经将它插入到我的文档的< body> 标签，但现在我想要它填充屏幕的全宽和全高。我已经尝试设置宽度和高度属性< svg> ， position：absolute 和 top，right，bottom，left：0 ， viewBox 设置为0 0 screen_width screen_height，使用加载.svg文件作为图像和强制图像使用 position：absolute nad 顶部，右侧，底部，左侧：0
这里是svg本身： http://pastebin.com/y8kqf1bD
我已尝试过全宽和高度SVG ，但它们也不起作用。
你有我的想法我该怎么办？
非常感谢这么多！
$ $ $ b $ b
< svg height =100％width =100％>
< / svg>
将填满屏幕。
将另外需要设置< html> 和< body> tags style =width：100％ ;高度：100％，以确保它们覆盖屏幕。这是一个完整的全屏幕矩形：
< html style =width：100％; height：100％;>
< body style =width：100％; height：100％; margin：0;>
< svg height =100％width =100％>
< rect fill =limewidth =100％height =100％/>
< / svg>
< / body>
< / html>
I have bought an svg graphics, which I have exported to .svg file, so that it can be used in inline HTML. I have inserted it into <body> tag of my document, but now I want it to fill full width and full height of the screen. I have tried setting width and height attribute of <svg>, position: absolute and top, right, bottom, left: 0, viewBox set to "0 0 screen_width screen_height", load .svg file as image and force image to be full-window using position: absolute nad top, right, bottom, left: 0.
Nothing worked, though.
Here is the svg itself: http://pastebin.com/y8kqf1bD
I have tried all of the options from Full width and height SVG but they do not work, too.
Do you have an idea how could I do that?
Thanks so much in advance!
<svg> elements are sized using height and width attributes so
<svg height="100%" width="100%">
</svg>
will fill the screen.
You will additionally need to set both the <html> and <body> tags style="width:100%;height:100%" to ensure that they cover the screen. Here's a complete full screen rect:
<html style="width:100%;height:100%;">
<body style="width:100%;height:100%;margin:0;">
<svg height="100%" width="100%">
<rect fill="lime" width="100%" height="100%"/>
</svg>
</body>
</html>
这篇关于使内联svg填满整个屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
