如何使内联 SVG 始终填满屏幕？

Question

我创建了一个矢量图像，我想将它用作我网站的主角。它应该在所有分辨率下填充视口的宽度和高度。

此外，我需要能够通过 CSS 或 JavaScript 为 SVG 元素设置动画，因此无法将其作为 css 背景或 img 插入（在至少据我所知）。

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

如有任何帮助，我们将不胜感激！

Answer 1

将属性 preserveAspectRatio="slice" 添加到 SVG。有关详细信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio。

Answer 2

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

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Load SVG file - full screen</title>
</head>
<body style='padding:0px;font-family:arial'>
<div id=svgDiv style='width:100%;height:100%;overflow:hidden;position:absolute;top:0px;left:0px;'></div>
<script>
function loadSVG()
{
 var SVGFile="...your SVG file..."
 var loadXML = new XMLHttpRequest;
 loadXML.onload = callback;
 loadXML.open("GET", SVGFile, true);
 loadXML.send();
 function callback()
 {
  //---responseText---
   svgDiv.innerHTML=loadXML.responseText
         sizeFull()
 }
}
//--onload, onresize----
function sizeFull()
{
 var mySVG=document.getElementsByTagName("svg")[0]
   var svgW=window.innerWidth
 var svgH=window.innerHeight
    var bb=mySVG.getBBox()
 var bbx=bb.x
 var bby=bb.y
 var bbw=bb.width
 var bbh=bb.height

    mySVG.setAttribute("viewBox",bbx+" "+bby+" "+bbw+" "+bbh )
    mySVG.setAttribute("width",svgW)
    mySVG.setAttribute("height",svgH)
}
window.onresize=sizeFull
//document.addEventListener("onload",loadSVG(),false)
</script>
</body>
</html>

Answer 3

感谢 Robert Longson 的评论，它开始工作了：对 SVG 应用 preserveAspectRatio="xMidYMid slice" 和 100% 宽度和高度有效。

你可以在这里看到：http://codepen.io/EigenDerArtige/pen/yMaXZx

如何使内联 SVG 始终填满屏幕？

How can I make an inline SVG always fill out the screen?

svg

scale

responsiveness

inline-svg