Question

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

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

我已尝试过Full width and height SVG中的所有选项，但它们也不起作用。

你知道我怎么能这样做？

提前非常感谢！

Answer 1

<svg>个元素的大小使用高度和宽度属性，所以

<svg height="100%" width="100%">
</svg>

将填满屏幕。

您还需要同时设置<html>和<body>标签样式=“宽度：100％;高度：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>

使内联svg填满整个屏幕

1 个答案: