Making inline svg fill whole screen

2019-04-25 07:58发布

站内问答 / HTML/CSS
529 1 4

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!

标签： html css svg
举报
1条回答
迷人小祖宗
2楼-- · 2019-04-25 08:26

<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>

You can also do this via a stylesheet if you want.

html, body, svg {
  width: 100%;
  height: 100%;
  margin: 0;
}
<html>
<body>
  <svg>
    <rect fill="lime" width="100%" height="100%"/>
  </svg>
</body>
</html>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)