让内联SVG填满整个屏幕

Question

让内联SVG填满整个屏幕

htmlcsssvg

18

我购买了一张SVG图形，并将其导出为.SVG文件，以便在内联HTML中使用。我将它插入到我的文档的标签中，但现在我想让它填满整个屏幕的宽度和高度。尝试设置
虽然什么都不起作用。

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

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

您有什么想法吗？

非常感谢！

- user2908600

记住！ViewBox 不是它的大小。ViewBox 实际上是与其大小相反的。ViewBox 是其本机大小。增加 ViewBox 的宽度将减小大小宽度。 - bjb568

1

请确保设置preserveAspectRatio。 - KyleMit

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

<svg>元素通过height和width属性进行尺寸调整。

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

将填满整个屏幕。

您还需要将<html>和<body>标签的样式设置为"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>