1

I've created a vector image, which I'd like to use as a hero for my website. It should fill out the width and height of the viewport at all resolutions.

Furthermore I need to be able to animate the SVG's elements via CSS or JavaScript, so inserting it as a css background or an img isn't an option (at least as far as I know).

Do you guys know a way to solve this? This image shows, what I'd like to achieve: enter image description here

Any help would be greatly appreciated!

4

3 回答 3

3

得到它的工作，感谢罗伯特朗森的评论：应用preserveAspectRatio="xMidYMid slice"和 100% 宽度和高度到 SVG 工作。

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

于 2017-03-06T15:18:03.630 回答
0

填充屏幕的首选 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>

于 2017-03-01T22:52:03.060 回答
-1

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

于 2017-03-01T19:37:05.050 回答