Как сделать так, чтобы встроенный SVG всегда заполнял экран?

Я создал векторное изображение, которое я хотел бы использовать в качестве героя для моего сайта. Он должен заполнить ширину и высоту области просмотра во всех разрешениях.

Кроме того, мне нужно иметь возможность анимировать элементы SVG с помощью CSS или JavaScript, поэтому вставка их в качестве фона CSS или IMG не вариант (по крайней мере, насколько я знаю).

Ребята, вы знаете, как решить эту проблему? Это изображение показывает, чего я хотел бы достичь:

Любая помощь будет принята с благодарностью!

Источник

3 ответа

Решение

Приступил к работе, благодаря комментарию Роберта Лонгсона: preserveAspectRatio="xMidYMid slice" и 100% ширина и высота, чтобы SVG работал.

Вы можете увидеть это здесь: http://codepen.io/EigenDerArtige/pen/yMaXZx

Источник

Добавьте атрибут preserveAspectRatio="slice" в SVG. См. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio для получения подробной информации.

Источник

Предпочтительные изображения svg, заполняющие экран, показаны обрезанными. Поскольку вы работаете с SVG, я полагаю, что вы, возможно, захотите, чтобы все изображение было удобно расположено по центру, не обрезаясь. Пример кода ниже загрузит файл SVG и заполнит экран, центрируя SVG. Все элементы доступны для изменений CSS и JavaScript. Это также будет реагировать на изменение размера окна.

Скопируйте приведенное ниже в HTML-файл, добавив свой собственный URL-адрес SVG-файла и раскомментируйте событие 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>

Источник
Другие вопросы по тегам