Question

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

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

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

非常感谢任何帮助！

Answer 1

得益于Robert Longson的评论：应用preserveAspectRatio="xMidYMid slice"和100％宽度＆amp; SVG的高度有效。

您可以在此处查看：http://codepen.io/EigenDerArtige/pen/yMaXZx

Answer 2

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

将以下内容复制到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

将属性"abcdef".casecmp?("abcde") #=> false "aBcDeF".casecmp?("abcdef") #=> true "abcdef".casecmp?("abcdefg") #=> false "abcdef".casecmp?("ABCDEF") #=> true添加到SVG。有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio。

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

3 个答案: