如何使内嵌SVG始终填充屏幕？

我已经创建了一个向量图像，我想用它作为我网站的英雄。它应该以所有分辨率填充视口的宽度和高度

此外，我需要能够通过CSS或JavaScript设置SVG元素的动画，因此将其作为CSS背景或img插入不是一个选项（至少据我所知）

你们知道解决这个问题的方法吗？ 此图显示了我想要实现的目标：

---

任何帮助都将不胜感激

将属性

preserveSpectratio=“slice”

添加到SVG。有关详细信息，请参阅。

填充屏幕的首选svg图像显示为裁剪。在使用SVG时，我相信您可能希望整个图像居中，在不进行任何裁剪的情况下很好地填充屏幕。下面的示例代码将加载一个svg文件并填充屏幕，使svg居中。css和javascript更改可以访问所有元素。 这也将响应窗口大小调整

将以下内容复制到HTML文件，添加您自己的svg文件URL并取消对onload事件的注释

加载SVG文件-全屏
函数loadSVG（）
{
var SVGFile=“…您的SVG文件…”
var loadXML=newXMLHttpRequest；
loadXML.onload=回调；
loadXML.open（“GET”，SVGFile，true）；
loadXML.send（）；
函数回调（）
{
//---响应文本---
svgDiv.innerHTML=loadXML.responseText
sizeFull（）
}
}
//--onload，onresize----
函数sizeFull（）
{
var mySVG=document.getElementsByTagName（“svg”）[0]
var svgW=窗内宽度
var svgH=window.innerHeight
var bb=mySVG.getBBox（）
变量bbx=bb.x
变量bby=bb.y
var bbw=bb.width
var bbh=bb.高度
mySVG.setAttribute（“视图框”，bbx+“”+bby+“”+bbw+“”+bbh）
mySVG.setAttribute（“宽度”，svgW）
mySVG.setAttribute（“高度”，svgH）
}
window.onresize=sizeFull
//document.addEventListener（“onload”，loadSVG（），false）

多亏了罗伯特·朗森的评论，它成功了： 将

preserveAspectRatio=“xMidYMid-slice”

和100%宽度和高度应用于SVG工作

---

您可以在这里看到：

preserveAspectRatio=“xMidYMid-slice”是您想要的，我想。谢谢您的帮助！让它工作。没有一个似乎不符合要求，因为图片显示纵横比没有变化。相反，它们是从溢出的任何方向切割的。@RobertLongson啊，我没有仔细看这些图片。“slice”而不是“none”应该起到预期的作用。这仍然是无效的，因为不能单独使用slice，它前面必须有一个有效的align值。