允许 svg 占据全宽

大佬教程收集整理的这篇文章主要介绍了允许 svg 占据全宽，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决允许 svg 占据全宽？

开发过程中遇到允许 svg 占据全宽的问题如何解决？下面主要结合日常开发的经验，给出你关于允许 svg 占据全宽的解决方法建议，希望对你解决允许 svg 占据全宽有所启发或帮助；

在 figma 上实现样式@R_801_9864@转换为 HTML/CSS 后，我注意到 svg 没有采用图像中指示的所有宽度，尤其是黑色波浪，我尝试了几种技术，例如缩放变换，但事实并非如此目标我只想让波浪占据所有宽度以便我们可以安静地缩放页面，我在此处创建了示例的副本：https://codepen.io/HalasProject/pen/xxRxKaN

SVG 的 HTML 代码：

<svg class="bg-svg" wIDth="1360" height="402" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g ID="Group 3">
    <rect ID="rectangle" wIDth="100%" height="100%" fill="orange" />
    <path ID="oval" fill-rule="evenodd" clip-rule="evenodd" d="M1000.89 378C1077.38 378 1139.39 315.991 1139.39 239.5C1139.39 163.009 1077.38 101 1000.89 101C924.4 101 862.392 163.009 862.392 239.5C862.392 315.991 924.4 378 1000.89 378Z" fill="white" fill-opacity="0.24" />
    <g ID="points" class="animated pulse infinite" style="animation-duration: 6s;">
      <path ID="oval_2" fill-rule="evenodd" clip-rule="evenodd" d="M1131.08 311.378C1144.72 311.378 1155.77 300.325 1155.77 286.689C1155.77 273.054 1144.72 @R_696_11277@ 1131.08 @R_696_11277@C1117.45 @R_696_11277@ 1106.39 273.054 1106.39 286.689C1106.39 300.325 1117.45 311.378 1131.08 311.378Z" fill="white" fill-opacity="0.48" />
      <path ID="polygon" fill-rule="evenodd" clip-rule="evenodd" d="M801.844 179L816.296 193.452L801.844 207.904L787.392 193.452L801.844 179Z" fill="white" fill-opacity="0.48" />
      <path ID="polygon_2" fill-rule="evenodd" clip-rule="evenodd" d="M972.009 35L1001.52 64.5065L972.009 94.013L942.503 64.5065L972.009 35Z" fill="white" fill-opacity="0.17" />
      <path ID="polygon_3" fill-rule="evenodd" clip-rule="evenodd" d="M721.478 101.242L733.054 118.086L716.21 129.662L704.634 112.818L721.478 101.242Z" fill="white" fill-opacity="0.48" />
      <path ID="polygon_4" fill-rule="evenodd" clip-rule="evenodd" d="M807.869 37.6337L819.446 54.4776L802.602 66.054L791.025 49.2102L807.869 37.6337Z" fill="white" fill-opacity="0.48" />
      <path ID="polygon_5" fill-rule="evenodd" clip-rule="evenodd" d="M1099.07 72.937L1106.29 80.163L1099.07 87.3891L1091.84 80.163L1099.07 72.937Z" fill="white" fill-opacity="0.54" />
    </g>
    <path ID="Vector" d="M0 370.278L37.7778 338.556C75.5556 306.834 151.111 243.389 226.667 238.135C302.222 232.485 377.778 286.016 453.333 280.365C528.889 275.112 604.444 211.667 680 206.413C755.556 200.763 831.111 254.294 906.667 290.973C982.222 327.651 1057.78 349.46 1133.33 338.556C1208.89 327.651 1284.44 286.016 1322.22 264.504L1360 243.389V402H1322.22C1284.44 402 1208.89 402 1133.33 402C1057.78 402 982.222 402 906.667 402C831.111 402 755.556 402 680 402C604.444 402 528.889 402 453.333 402C377.778 402 302.222 402 226.667 402C151.111 402 75.5556 402 37.7778 402H0V370.278Z" fill="#273036" />
    <rect ID="airplane" x="762" y="168.012" wIDth="407" height="204" transform="rotate(-13.5 762 168.012)" fill="url(#pattern0)" />
  </g>
  <defs>
    <pattern ID="pattern0" patternContentUnits="objectBoundingBox" wIDth="1" height="1">
      <use xlink:href="#image0" transform=" scale(0.00104423 0.00208333)" />
    </pattern>
    <image ID="image0" xlink:href="https://lh3.Googleusercontent.com/proxy/mG7vldemsGrdLaAD8Wu5GT7WxfSQprqChFjz5u-KXIIhX1y5UXB1dGARfGzU47XdUYr02jn09LclxGHSBFaRzUTIqUrOuDMgyQf31SOTlXhLkZkBKf02KddK3My_bzk3" wIDth="960" height="480" />
  </defs>
</svg>

解决方法

大佬总结

以上是大佬教程为你收集整理的允许 svg 占据全宽全部内容，希望文章能够帮你解决允许 svg 占据全宽所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。