Question

我创建了具有背景图像的SVG。

当我在浏览器中显示此svg时，它没有完整宽度。

我需要具有svg的全宽度，我将其宽度设置为100％，但没有用。

这就是我的作品。

代码

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1584 430.07">
            <defs>
              <style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:url(#linear-gradient);}
              </style>
              <clipPath id="clip-path" transform="translate(55.4 -492.58)">
                <path class="cls-1" d="M-27,636C84.25,567.54,343.82,469.55,512.2,527.7c68.3,23.59,137.95,66.7,411.2,84.26,194.2,14.95,352.85,3.84,585.6-30.37V900.5H-27Z"/>
              </clipPath>
              <linearGradient id="linear-gradient" x1="28.8" y1="212.55" x2="1564" y2="212.55" gradientUnits="userSpaceOnUse">
                <stop offset="0.14" stop-color="#662d91" stop-opacity="0.72"/>
                <stop offset="0.26" stop-color="#5f3194" stop-opacity="0.76"/>
                <stop offset="0.44" stop-color="#4d3d9c" stop-opacity="0.86"/>
                <stop offset="0.44" stop-color="#4c3e9c" stop-opacity="0.86"/>
                <stop offset="0.56" stop-color="#3051a8" stop-opacity="0.8"/>
                <stop offset="0.73" stop-color="#0071bc" stop-opacity="0.7"/>
                <stop offset="0.93" stop-color="#096bb8" stop-opacity="0.9"/>
              </linearGradient>
            </defs>
            <title>Untitled-2</title>
            <g class="cls-2"><image width="500" height="245" transform="scale(3.17 1.76)" xlink:href="data:image/jpeg;base64,/(**ByteCode for Image**)"/>
              <rect class="cls-3" x="28.8" y="17.42" width="1535.2" height="390.25"/>
            </g>
          </svg>

这是我需要的最新PNG。

新的SVG代码

 <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 1502.1 1320.3" style="enable-background:new 0 0 1502.1 1320.3;" xml:space="preserve">
    <style type="text/css">
    	.st0{clip-path:url(#SVGID_2_);fill:url(#SVGID_3_);}
    </style>
    <g>
    	<defs>
    		<path id="SVGID_1_" d="M0,26.9c134.3,4.6,658.6,50.7,732.3,57.7c0-2.2,769.8-27.1,769.8-24.9c0.2,13.7,0,1260.6,0,1260.6L0,1320.3
    			C0,1320.3,0,26.9,0,26.9z"/>
    	</defs>
    	<clipPath id="SVGID_2_">
    		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
    	</clipPath>
    	<g style="clip-path:url(#SVGID_2_);">
    		
    			<image style="overflow:visible;" width="1476" height="692" xlink:href="86E00C1C.jpg"  transform="matrix(1.4941 0 0 1.8796 -349.3057 19.601)">
    		</image>
    	</g>
    	
    		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="28.1822" y1="-181.5918" x2="1530.3799" y2="-181.5918" gradientTransform="matrix(1 0 0 -1 0 492)">
    		<stop  offset="0.14" style="stop-color:#662D91;stop-opacity:0.72"/>
    		<stop  offset="0.26" style="stop-color:#5F3194;stop-opacity:0.76"/>
    		<stop  offset="0.44" style="stop-color:#4D3D9C;stop-opacity:0.86"/>
    		<stop  offset="0.44" style="stop-color:#4C3E9C;stop-opacity:0.86"/>
    		<stop  offset="0.56" style="stop-color:#3051A8;stop-opacity:0.8"/>
    		<stop  offset="0.73" style="stop-color:#0071BC;stop-opacity:0.7"/>
    		<stop  offset="0.93" style="stop-color:#096BB8;stop-opacity:0.9"/>
    	</linearGradient>
    	<rect x="0" y="26.9" class="st0" width="1502.2" height="1293.4"/>
    </g>
    <title>backSVG</title>
    </svg>

Answer 1

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

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1536 408">
        <defs>
          <style>
            .cls-1{fill:none;}
            .cls-2{clip-path:url(#clip-path);}
            .cls-3{fill:url(#linear-gradient);}
          </style>
          <clipPath id="clip-path" transform="translate(27 -492.58)">
            <path class="cls-1" d="M-27,636C84.25,567.54,343.82,469.55,512.2,527.7c68.3,23.59,137.95,66.7,411.2,84.26,194.2,14.95,352.85,3.84,585.6-30.37V900.5H-27Z"/>
          </clipPath>
          <linearGradient id="linear-gradient">
            <stop offset="0.14" stop-color="#662d91" stop-opacity="0.72"/>
            <stop offset="0.26" stop-color="#5f3194" stop-opacity="0.76"/>
            <stop offset="0.44" stop-color="#4d3d9c" stop-opacity="0.86"/>
            <stop offset="0.44" stop-color="#4c3e9c" stop-opacity="0.86"/>
            <stop offset="0.56" stop-color="#3051a8" stop-opacity="0.8"/>
            <stop offset="0.73" stop-color="#0071bc" stop-opacity="0.7"/>
            <stop offset="0.93" stop-color="#096bb8" stop-opacity="0.9"/>
          </linearGradient>
        </defs>
        <title>Untitled-2</title>
          <g class="cls-2"><image width="500" height="245" transform="scale(3.17 1.76)" xlink:href="data:image/jpeg;base64,/(**ByteCode for Image**)"/>
          <rect class="cls-3" width="1536" height="408"/>
        </g>
      </svg>

主要更改：
-viewBox的宽度现在是1536，而不是1584。如果1584的宽度很重要，则应该采用不同的方法。
-由于剪切路径从x = -27开始，因此剪切路径的转换现在是transform="translate(27 -492.58)"而不是transform="translate(55.4 -492.58)"

我希望这会有所帮助。

更新：我已经为d重新计算了clipPath属性，现在您不需要翻译整个内容。

<clipPath id="clip-path" >
        <path class="cls-1" d="M0,143.42C111.25,74.96,370.82,-23.03,539.2,35.12c68.3,23.59 137.95,66.7 411.2,84.26 c194.2,14.95,352.85,3.84,585.6-30.37L1536,407.92L0,407.92L0,143.42Z"/>
</clipPath>

Answer 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;
  width: 100%;
  height: 100%;
}

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

工作codepen。

网页设计中SVG的宽度为100％

2 个答案: