12

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

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

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

你知道我该怎么做吗？

提前非常感谢！

4

1 回答 1

16

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

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

将填满屏幕。

您还需要设置<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>

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

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

于 2013-10-22T20:50:09.577 回答