时间戳

首页 > 解决方案 > 如何为 react.js 应用缩放 svg 背景？

css - 如何为 react.js 应用缩放 svg 背景？

问题描述

我在缩放背景 svg 图像时遇到问题。我希望它可以缩放到每个浏览器窗口大小，但是现在无论我设置什么参数，它都不会垂直缩放。我已经尝试直接在 svg 文件中删除宽度和高度，如为什么我的 SVG 图像不使用 CSS“宽度”属性进行缩放？并尝试手动调整 viewBox 和 preserveAspectRatio，但图像在某些缩放点总是以混乱的高度结束（例如移动设备全高的 1/3）。我对图像做错了什么还是应该简单地为不同的比例创建另一个？

我的 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>

水平收缩太多后的样子

标签： cssreactjssvg

解决方案

您是否尝试过通过 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/

推荐阅读