网页设计中 SVG 的 100% 宽度
100 Percent width to SVG in webdesign
我创建了在背景中有图像的 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>
SVG canvas 的宽度为 100%。问题是剪切路径小于 SVG canvas。
我对您的代码做了一些更改，现在剪切路径跨越了 SVG 的整个宽度 canvas。
<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)"
希望对您有所帮助。
更新：
我已经为 clipPath 重新计算了 d 属性，现在您不需要翻译整个内容。
<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>
对我来说这个实现有效（不包含渐变）：
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。
当我在浏览器中显示此 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>
SVG canvas 的宽度为 100%。问题是剪切路径小于 SVG canvas。 我对您的代码做了一些更改，现在剪切路径跨越了 SVG 的整个宽度 canvas。
<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)"
希望对您有所帮助。
更新：
我已经为 clipPath 重新计算了 d 属性，现在您不需要翻译整个内容。
<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>
对我来说这个实现有效（不包含渐变）：
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。