Html webdesign中SVG的100%宽度

我已经创建了SVG，它在背景中有一个图像

当我在浏览器中显示此svg时，它没有全宽

我需要有svg的全宽，我将其宽度设置为100%，但它不起作用

这是我做的。

代码

.cls-1{fill:none；}.cls-2{clip path:url（#clip path）；}.cls-3{fill:url（#线性渐变）；}
无标题-2

SVG画布的宽度为100%。问题是剪辑路径比SVG画布小。 我对您的代码做了一些更改，现在剪切路径跨越了SVG画布的整个宽度

.cls-1{fill:none；}
.cls-2{剪辑路径：url（#剪辑路径）；}
.cls-3{fill:url（#线性梯度）；}
无标题-2

对于我来说，此实现有效（不包含渐变）：

html

<svg id="back-image" x="0px" y="0px"
     width="486.312px" height="229.219px" viewBox="79.14 209.227 486.312 229.219" preserveAspectRatio="none">
<g>
    <defs>
      <clipPath id="SVGID_2_">
          <path d="M79.14,283.187c35.223-40.186,117.406-97.704,170.716-63.57c21.625,13.847,43.676,39.152,130.188,49.458
            c61.488,8.778,111.717,2.255,185.407-17.826v187.197H79.14V283.187z"/>
      </clipPath>
  </defs>
    <g clip-path="url(#SVGID_2_)">
            <image overflow="visible" width="500" height="245" xlink:href="data:image/jpeg;base64,(**image code here**)" transform="matrix(1 0 0 0.9999 72.8289 201.6646)">
        </image>
    </g>
</g>
</svg>

---

正在工作。

请查看此评论，它可能会有所帮助：。另外，请确保您在css中设置了“body，html{margin:0；padding:0}”。@gazdagergo它不起作用我已经设置了每个元素的边距，padding 0和width 100%不起作用您可以在这里检查我将您的图像数据放入我上面的代码笔链接（没有渐变）。我添加了

preserveSpectratio=“none”

，因为您仍然可以在svg中拉伸图像。现在你可以通过css设置高度，同时宽度延伸到100%。是的，它可以工作，但如果需要更改高度，我会怎么做？我如何在Adobe illustrator中而不是在中设置此翻译code@EngrUmair是否需要使用新的宽度相应地更改高度？请举例说明。我很乐意帮忙。

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#back-image {
  width: 100%;
  height: 240px;
}