如何让SVG适配100vw？尝试多种方法仍未解决

要让SVG自适应100vw且保持显示一致，核心要解决固定尺寸束缚、滤镜不跟随缩放、渐变错位这三个问题，具体修改如下：

1. 调整SVG的基础属性 #

• 移除固定的height="1135"，改为height="auto"，让高度随宽度等比缩放
• 添加匹配SVG实际内容尺寸的viewBox（你的SVG内容宽度约1924，高度约1125）
• 设置preserveAspectRatio保证缩放时比例不变

修改后的SVG标签：

<svg width='100vw' height="auto" viewBox="0 0 1924 1125" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg">

2. 修复滤镜跟随缩放问题 #

原滤镜用了filterUnits="userSpaceOnUse"，会绑定固定坐标导致缩放时滤镜区域失效。改成objectBoundingBox，并将滤镜的位置和尺寸设为百分比，确保滤镜覆盖整个SVG：

<filter id="filter0_bi_771_414" x="-5%" y="-5%" width="110%" height="110%" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB">
  <!-- 原有滤镜内容保持不变 -->
</filter>

3. 修正渐变错位问题 #

原渐变用userSpaceOnUse绑定固定坐标，缩放时渐变会偏离元素。改成objectBoundingBox，并调整渐变起止点为相对SVG边界的百分比：

<!-- 第一个渐变修改 -->
<linearGradient id="paint0_linear_771_414" x1="1" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
  <stop stop-color="white" stop-opacity="0.08"/>
  <stop offset="0.494792" stop-color="white" stop-opacity="0.825"/>
  <stop offset="1" stop-color="white" stop-opacity="0.35"/>
</linearGradient>

<!-- 第二个渐变修改 -->
<linearGradient id="paint1_linear_771_414" x1="1" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
  <stop stop-color="white" stop-opacity="0.41"/>
  <stop offset="0.567961" stop-color="white"/>
  <stop offset="0.946343" stop-color="white" stop-opacity="0.41"/>
</linearGradient>

完整修改后的代码 #

CSS #

body {
  background-color: black;
  margin: 0; /* 移除默认边距，让SVG全屏 */
}

HTML #

<body>
<svg width='100vw' height="auto" viewBox="0 0 1924 1125" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg">
    
<g filter="url(#filter0_bi_771_414)">
<path d="M1923 3.0437C1886.27 11.4761 1847.41 24.1602 1806.36 41.7532C1695.81 89.1314 1613.3 134.288 1541.57 173.544C1299.46 306.054 1180.21 371.321 519.999 227.797C308.659 181.853 138.487 163.464 3 165.423V1124.05C144.84 1149.69 331.446 1116.75 578.468 982.601C1003.51 751.782 1509.05 883.186 1923 1001.07V3.0437Z" fill="url(#paint0_linear_771_414)" fill-opacity="0.74"/>
<path d="M1924.14 3.0437V1.61733L1922.75 1.93648C1885.94 10.3854 1847.02 23.0916 1805.91 40.709C1695.31 88.1087 1612.76 133.287 1541.04 172.544L1541.03 172.548C1419.97 238.804 1329.81 288.14 1187.46 303.053C1045.04 317.973 850.327 298.445 520.241 226.687C308.843 180.73 138.581 162.326 2.98357 164.288L1.86397 164.304V165.423V1124.05V1125L2.79792 1125.17C144.986 1150.87 331.862 1117.81 579.01 983.6C1003.58 753.036 1508.66 884.255 1922.69 1002.16L1924.14 1002.58V1001.07V3.0437Z" stroke="url(#paint1_linear_771_414)" stroke-width="2.27205" />
</g>
<defs>
<filter id="filter0_bi_771_414" x="-5%" y="-5%" width="110%" height="110%" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="25.6243"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_771_414"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_771_414" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="2.56243" dy="5.12487"/>
<feGaussianBlur stdDeviation="12.8122"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_771_414"/>
</filter>
<linearGradient id="paint0_linear_771_414" x1="1" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
<stop stop-color="white" stop-opacity="0.08"/>
<stop offset="0.494792" stop-color="white" stop-opacity="0.825"/>
<stop offset="1" stop-color="white" stop-opacity="0.35"/>
</linearGradient>
<linearGradient id="paint1_linear_771_414" x1="1" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
<stop stop-color="white" stop-opacity="0.41"/>
<stop offset="0.567961" stop-color="white"/>
<stop offset="0.946343" stop-color="white" stop-opacity="0.41"/>
</linearGradient>
</defs>
</svg>
</body>

内容的提问来源于stack exchange，提问作者Superweb Digital