使内联svg填满整个屏幕

use*_*600 9 html css svg

我已经购买了一个svg图形,我已经导出到.svg文件,因此它可以用于内联HTML.我已将它插入到<body>我的文档的标记中,但现在我希望它填充屏幕的全宽和全高.我已尝试设定的宽度和高度属性<svg>,position: absolute并且top, right, bottom, left: 0,viewBox设定为"0 0 screen_width screen_height",负载.svg文件作为图像和力图像使用为全窗口position: absoluteNAD top, right, bottom, left: 0.
但是没有任何作用.

这是svg本身:http://pastebin.com/y8kqf1bD

我已经尝试了全宽和高度SVG的所有选项,但它们也不起作用.

你知道我怎么能这样做?

非常感谢提前!

Rob*_*son 10

<svg> 使用高度和宽度属性来调整元素的大小

<svg height="100%" width="100%">
</svg>
Run Code Online (Sandbox Code Playgroud)

将填满屏幕.

您还需要设置<html><body>标签style ="width:100%; height:100%"以确保它们覆盖屏幕.这是一个完整的全屏矩形:

<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>
Run Code Online (Sandbox Code Playgroud)

如果需要,您也可以通过样式表执行此操作.

html, body, svg {
  width: 100%;
  height: 100%;
  margin: 0;
}
Run Code Online (Sandbox Code Playgroud)
<html>
<body>
  <svg>
    <rect fill="lime" width="100%" height="100%"/>
  </svg>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)