HTML SVG 响应大小

Question

我正在开发网络和移动应用程序。我想用 svg html 创建一个挥动的标题，我已经创建了我的 svg 模式，但它不响应我的窗口大小。

这是我的代码：

<div style="margin: -10px; text-align: center;">
      <svg width="360" height="301" viewBox="0 0 360 301" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M-48 292.136L-29 268.123C-10 244.11 28 223.497 66 229.5C104 235.503 142 268.123 180 292.136C242.5 320 256 274.126 294 262.12C332 250.113 370 268.123 389 262.12L408 256.117V0H389C370 0 332 0 294 0C256 0 218 0 180 0C142 0 104 0 66 0C28 0 -10 0 -29 0L-48 40V292.136Z" fill="url(#paint0_linear)"/>
      <defs>
        <linearGradient id="paint0_linear" x1="330.417" y1="172.594" x2="109.554" y2="432.703" gradientUnits="userSpaceOnUse">
          <stop stop-color="#28DDD2"/>
          <stop offset="0.86034" stop-color="#3DC0F0"/>
        </linearGradient>
      </defs>
      </svg>
    </div>

我想让这个 svg 根据我的窗口大小（Web 视图）展开

移动视图

Answer 1

尝试使用 CSS 将 SVG 设置width为100%和heightto auto：

<div style="margin: -10px; text-align: center;">
  <svg width="360" height="301" viewBox="0 0 360 301" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:auto;">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M-48 292.136L-29 268.123C-10 244.11 28 223.497 66 229.5C104 235.503 142 268.123 180 292.136C242.5 320 256 274.126 294 262.12C332 250.113 370 268.123 389 262.12L408 256.117V0H389C370 0 332 0 294 0C256 0 218 0 180 0C142 0 104 0 66 0C28 0 -10 0 -29 0L-48 40V292.136Z" fill="url(#paint0_linear)"/>
      <defs>
        <linearGradient id="paint0_linear" x1="330.417" y1="172.594" x2="109.554" y2="432.703" gradientUnits="userSpaceOnUse">
          <stop stop-color="#28DDD2"/>
          <stop offset="0.86034" stop-color="#3DC0F0"/>
        </linearGradient>
      </defs>
      </svg>
</div>

编辑：要缩放宽度而不缩放高度，请设置width为100%（也可以指定固定高度）并添加值为 的preserveAspectRatio属性none：

<div style="margin: -10px; text-align: center;">
  <svg width="360" height="301" viewBox="0 0 360 301" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100px;" preserveAspectRatio="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M-48 292.136L-29 268.123C-10 244.11 28 223.497 66 229.5C104 235.503 142 268.123 180 292.136C242.5 320 256 274.126 294 262.12C332 250.113 370 268.123 389 262.12L408 256.117V0H389C370 0 332 0 294 0C256 0 218 0 180 0C142 0 104 0 66 0C28 0 -10 0 -29 0L-48 40V292.136Z" fill="url(#paint0_linear)"/>
      <defs>
        <linearGradient id="paint0_linear" x1="330.417" y1="172.594" x2="109.554" y2="432.703" gradientUnits="userSpaceOnUse">
          <stop stop-color="#28DDD2"/>
          <stop offset="0.86034" stop-color="#3DC0F0"/>
        </linearGradient>
      </defs>
      </svg>
</div>