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

Posted 2023-03-06

【中文标题】如何为 react.js 应用缩放 svg 背景？

【英文标题】：How to scale svg background for react.js app?

【发布时间】：2020-05-31 06:54:18

【问题描述】：

我在缩放背景 svg 图像时遇到问题。我希望它可以缩放到每个浏览器窗口大小，但是现在无论我设置什么参数，它都不会垂直缩放。我已经尝试按照Why don't my SVG images scale using the CSS "width" property? 中的说明直接在 svg 文件中删除宽度和高度，并尝试手动调整 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>

【参考方案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/

【参考方案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>