使 SVG 适合 100vw

问题描述 投票：0回答：1

我正在尝试让这个 SVG 适合 100vw，但我似乎无法实现它。

我尝试添加一个类并使用宽度：100vw。 我尝试添加 viewBox="0 0 900 1135" （并尝试更改属性，但它从来没有工作）。

我有一个 CodePen，如果有任何关于如何使这个 SVG 在任何屏幕尺寸上看起来都一样的想法，我将不胜感激。

Codepen：https://codepen.io/superwebdigital/pen/oNObdBG

body {background-color:black}
<body>
<svg width='100vw' height="1135" 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="-50.5211" y="-51.0577" width="2027.04" height="1236.65" filterUnits="userSpaceOnUse" 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="1905.21" y1="-1521.1" x2="-2512.19" y2="453.891" gradientUnits="userSpaceOnUse">
<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="3051.67" y1="-641.335" x2="1738.45" y2="2781.39" gradientUnits="userSpaceOnUse">
<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>

html css svg
1个回答
0
投票

您需要 

viewbox
来定义它在 SVG 视口内的位置和尺寸，否则它会表现得很有趣：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox .

您还可以使用 

preserveAspectRatio="none"
来完全控制 svg 的宽高比。如果您需要将整个形状限制在 div 内，请使用此选项：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

body {
  background-color:black;
  margin:0;
}
svg {
  width: 100vw;
  height: 300px;
}
<body>
<svg width='100vw' height="1135" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1924.14 1133.53" preserveAspectRatio="none">
    
<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="-50.5211" y="-51.0577" width="2027.04" height="1236.65" filterUnits="userSpaceOnUse" 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="1905.21" y1="-1521.1" x2="-2512.19" y2="453.891" gradientUnits="userSpaceOnUse">
<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="3051.67" y1="-641.335" x2="1738.45" y2="2781.39" gradientUnits="userSpaceOnUse">
<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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.