css - SVG 不随页面大小调整 React 缩放
问题描述
我有一个动画 SVG 在响应中，它应该相对于 100vh 和 100vw 从上到下在屏幕上绘制一些线条。问题是它适用于我的原生分辨率，但在调整窗口大小时不起作用（我在 gimp 中制作了相对于我的原生 res 的 svg）。我已经尝试了我能想到的每一个 CSS 组合，但我无法让它根据需要工作。
（底部的图像可以了解它应该是什么样子以及调整大小时会发生什么）
提前致谢 ：）
SVG：
<svg className="line_svg" xmlns="http://www.w3.org/2000/svg"
width="auto" height="100%"
viewBox="0 0 2560 1440">
<path id="Selection"
fill="none" stroke="green" stroke-width="2"
d="M 1279.00,0.00
C 1280.66,5.65 1283.93,7.93 1288.00,12.00
1288.00,12.00 1306.00,30.00 1306.00,30.00
1306.00,30.00 1374.00,98.00 1374.00,98.00
1374.00,98.00 1548.00,271.00 1548.00,271.00
1548.00,271.00 1606.00,329.00 1606.00,329.00
1612.96,335.96 1631.41,355.28 1638.00,360.00
1638.00,360.00 1610.91,389.00 1610.91,389.00
1610.91,389.00 1576.91,425.00 1576.91,425.00
1576.91,425.00 1549.09,454.00 1549.09,454.00
1549.09,454.00 1457.91,551.00 1457.91,551.00
1457.91,551.00 1396.09,616.00 1396.09,616.00
1396.09,616.00 1151.91,875.00 1151.91,875.00
1151.91,875.00 1124.09,904.00 1124.09,904.00
1124.09,904.00 1014.91,1020.00 1014.91,1020.00
1014.91,1020.00 989.04,1047.00 989.04,1047.00
989.04,1047.00 978.00,1059.00 978.00,1059.00
978.00,1059.00 965.83,1072.00 965.83,1072.00
964.29,1073.71 960.88,1076.96 960.17,1079.00
959.20,1081.77 961.03,1083.93 962.63,1086.00
962.63,1086.00 976.00,1101.00 976.00,1101.00
976.00,1101.00 1030.58,1162.00 1030.58,1162.00
1030.58,1162.00 1087.83,1226.00 1087.83,1226.00
1087.83,1226.00 1213.83,1367.00 1213.83,1367.00
1213.83,1367.00 1261.07,1420.00 1261.07,1420.00
1266.18,1425.63 1275.10,1437.95 1282.00,1440.00
1280.25,1433.86 1276.28,1430.56 1272.08,1426.00
1272.08,1426.00 1256.07,1408.00 1256.07,1408.00
1256.07,1408.00 1196.16,1341.00 1196.16,1341.00
1196.16,1341.00 1044.16,1171.00 1044.16,1171.00
1044.16,1171.00 993.17,1114.00 993.17,1114.00
993.17,1114.00 963.00,1081.00 963.00,1081.00
963.00,1081.00 975.04,1068.00 975.04,1068.00
975.04,1068.00 1024.09,1016.00 1024.09,1016.00
1024.09,1016.00 1052.91,986.00 1052.91,986.00
1052.91,986.00 1144.09,889.00 1144.09,889.00
1144.09,889.00 1205.91,824.00 1205.91,824.00
1205.91,824.00 1450.09,565.00 1450.09,565.00
1450.09,565.00 1477.91,536.00 1477.91,536.00
1477.91,536.00 1586.09,421.00 1586.09,421.00
1586.09,421.00 1612.96,393.00 1612.96,393.00
1612.96,393.00 1623.00,382.00 1623.00,382.00
1623.00,382.00 1635.28,369.00 1635.28,369.00
1636.74,367.34 1640.17,363.91 1640.83,362.00
1641.84,359.07 1639.76,357.00 1637.94,355.00
1637.94,355.00 1623.00,340.00 1623.00,340.00
1623.00,340.00 1560.00,277.00 1560.00,277.00
1560.00,277.00 1359.00,77.00 1359.00,77.00
1359.00,77.00 1304.00,22.00 1304.00,22.00
1298.18,16.18 1286.24,2.12 1279.00,0.00 Z" />
</svg>
CSS：
.front_page_parent{
width: 100vw;
height: 100vh;
display: block;
margin: 0 auto;
padding: 0;
}
.line_svg{
display: block;
margin: 0 auto;
max-width: 100vw;
max-height: 100vh;
stroke-dasharray: 6000;
animation: draw 2s ease-in;
fill: green;
overflow: hidden;
}
应用结构
export const App = () => {
return (
<div className="app">
<FrontPage />
</div>
)
}
export const FrontPage = () => {
return (
<div className="font_page_parent" style={BackgroundImageStyle}>
<svg className="line_svg" xmlns="http://www.w3.org/2000/svg"
width="auto" height="100%"
viewBox="0 0 2560 1440">
<path id="Selection"
fill="none" stroke="green" stroke-width="2"
d="......."- />
</svg>
</div>
