html - 如何将自定义波浪形分隔线添加到部分

Question

我正在尝试添加一个具有透明背景颜色且背景图像也具有形状分隔线的部分。

我做了什么。

我已经将 elementor 插件用于波浪形状分隔器，但它并没有按照我喜欢的方式工作。

由 elementor 生成的代码。

<div class="elementor-shape elementor-shape-bottom" data-negative="false">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
    <path class="elementor-shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7
    c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4
    c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
</svg>      </div>

我需要的。

我需要形状分隔符应该与部分背景完全融合，这样它才能有单一的外观。

并且形状分隔线的颜色必须像部分背景一样。

这是我需要创建的。

Answer 1

这是我需要的 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>

这是 PNG