html – 使内联svg填满整个屏幕

我已经购买了一个svg图形,我已经导出到.svg文件,因此它可以用于内联 HTML.我已将其插入< body>我的文档的标记,但现在我希望它填充屏幕的全宽和全高.我已经尝试设置< svg>的宽度和高度属性,位置:绝对和上,右,下,左:0,viewBox设置为“0 0 screen_width screen_height”,将.svg文件加载为图像并强制图像为满-window using position:absolute nad top,right,bottom,left:0.
但是没有任何作用.

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

我已经尝试了Full width and height SVG的所有选项,但它们也不起作用.

你知道我怎么能这样做?

非常感谢提前!

解决方法

< SVG>使用高度和宽度属性来调整元素的大小
<svg height="100%" width="100%">
</svg>

将填满屏幕.

您还需要设置< html>和< body> tags 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>

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

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

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...