Как масштабировать svg фон для приложения реакции. js?

Question

У меня проблема с масштабированием фонового изображения SVG. Я ожидаю, что он будет масштабироваться до каждого размера окна браузера, но сейчас он не масштабируется по вертикали, независимо от того, какие параметры я установил. Я уже пытался удалить ширину и высоту непосредственно в SVG-файле, как указано в Почему мои SVG-изображения не масштабируются с использованием свойства CSS "ширина"? и пытался настроить viewBox и preserveAspectRatio вручную, но изображение в некоторой точке масштабирования всегда получается неправильная высота (например, 1/3 полной высоты для мобильных устройств). Я делаю что-то не так с изображением или я должен просто создать еще один для другой крысы ios?

Мой фон SVG

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="162.3691" y1="646.5293" x2="893.0117" y2="646.5293" gradientTransform="matrix(0.8443 -0.5359 0.5359 0.8443 -42.54 93.5288)">
    <stop  offset="0" style="stop-color:#4C0082"/>
    <stop  offset="0.385" style="stop-color:#4C0382"/>
    <stop  offset="0.6165" style="stop-color:#4D0B81"/>
    <stop  offset="0.8074" style="stop-color:#4F1980"/>
    <stop  offset="0.9753" style="stop-color:#522D7E"/>
    <stop  offset="1" style="stop-color:#52317E"/>
    <stop  offset="1" style="stop-color:#52317E"/>
</linearGradient>
<polyline fill="url(#SVGID_1_)" points="822.948,62.45 1303.946,548.438 674.11,919.56 259.071,124.032 "/>
<polyline fill="none" points="111.374,570.263 560.868,-4.484 -31.051,-20.646 -66.404,551.071 -30.041,569.253 111.374,570.263 
    -338.119,1145.007 "/>
<polyline fill="#11102F" points="1398,-193 696,-193 258.103,-46.896 763.579,458.579 1008.067,314.586 "/>
<polyline fill="#410069" points="1035.566,291.588 334.097,701.066 1301.061,943.584 1213.131,524.346 "/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-247.6929" y1="273.7153" x2="482.9502" y2="273.7153" gradientTransform="matrix(0.8443 -0.5359 0.5359 0.8443 -42.54 93.5288)">
    <stop  offset="0" style="stop-color:#4C0082"/>
    <stop  offset="0.385" style="stop-color:#4C0382"/>
    <stop  offset="0.6165" style="stop-color:#4D0B81"/>
    <stop  offset="0.8074" style="stop-color:#4F1980"/>
    <stop  offset="0.9753" style="stop-color:#522D7E"/>
    <stop  offset="1" style="stop-color:#52317E"/>
    <stop  offset="1" style="stop-color:#52317E"/>
</linearGradient>
<polyline fill="url(#SVGID_2_)" points="276.948,-32.55 757.946,453.438 128.11,824.56 -286.929,29.032 "/>
</svg>

Answer 1

Вы пытались добавить его в качестве фонового изображения через CSS?

.mainElement {
    width: 100vw;
    height: 100vh;
    background: url("https://pixabay.com/get/57e7d0424a50a914ea9d8578c52f317a123ec3e45659704174267cd495/witch-1751025.svg") no-repeat center center;
    background-size: cover;
}

<div class="mainElement"></div>

Возможно, вы захотите посмотреть этот пост https://css-tricks.com/perfect-full-page-background-image/

Answer 2

Посмотрите на preserveAspectRatio и убедитесь, что все элементы html, body и svg занимают 100% высоты области просмотра.

html {
  height: 100%;
}

body {
  margin: 0;
  background: #4C0082;
  height: 100%;
}

svg {
  height: 100%;
  width: 100%;
}

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 960 560">
	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="162.3691" y1="646.5293" x2="893.0117" y2="646.5293" gradientTransform="matrix(0.8443 -0.5359 0.5359 0.8443 -42.54 93.5288)">    <stop  offset="0" style="stop-color:#4C0082"/>    <stop  offset="0.385" style="stop-color:#4C0382"/>    <stop  offset="0.6165" style="stop-color:#4D0B81"/>    <stop  offset="0.8074" style="stop-color:#4F1980"/>    <stop  offset="0.9753" style="stop-color:#522D7E"/>    <stop  offset="1" style="stop-color:#52317E"/>    <stop  offset="1" style="stop-color:#52317E"/></linearGradient><polyline fill="url(#SVGID_1_)" points="822.948,62.45 1303.946,548.438 674.11,919.56 259.071,124.032 "/><polyline fill="none" points="111.374,570.263 560.868,-4.484 -31.051,-20.646 -66.404,551.071 -30.041,569.253 111.374,570.263     -338.119,1145.007 "/><polyline fill="#11102F" points="1398,-193 696,-193 258.103,-46.896 763.579,458.579 1008.067,314.586 "/><polyline fill="#410069" points="1035.566,291.588 334.097,701.066 1301.061,943.584 1213.131,524.346 "/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-247.6929" y1="273.7153" x2="482.9502" y2="273.7153" gradientTransform="matrix(0.8443 -0.5359 0.5359 0.8443 -42.54 93.5288)">    <stop  offset="0" style="stop-color:#4C0082"/>    <stop  offset="0.385" style="stop-color:#4C0382"/>    <stop  offset="0.6165" style="stop-color:#4D0B81"/>    <stop  offset="0.8074" style="stop-color:#4F1980"/>    <stop  offset="0.9753" style="stop-color:#522D7E"/>    <stop  offset="1" style="stop-color:#52317E"/>    <stop  offset="1" style="stop-color:#52317E"/></linearGradient><polyline fill="url(#SVGID_2_)" points="276.948,-32.55 757.946,453.438 128.11,824.56 -286.929,29.032 "/>
</svg>