svg+蒙版实现波浪效果

<g class="layer" display="inline" id="liquid_box">
				<title>liquid_box</title>
				<path d="m26.21596,463.68312l1.64351,-70.85607c16.14736,-9.38521 20.08664,-2.23922 42.68483,-8.03207c22.59819,-5.79285 31.06838,-11.16229 57.73104,3.52621c26.66266,14.6885 45.97848,-17.99629 63.05244,-8.77019c17.07396,9.2261 58.73173,16.50609 77.42839,6.76752c18.69666,-9.73857 37.99224,29.80786 68.20857,-3.76989l-2.89872,79.08999l-308.13204,1.89419"
				 dataid="wave1" dheight="50" fill="url(#svg_48)" id="svg_36" showrank="10" stroke="#a7d3a9" stroke-fill="0"
				 stroke-img="0" stroke-width="0" />
				<path d="m27.37332,467.6629c0.529773,-28.882603 3.88236,-73.61466 0.58932,-83.64781c-3.29304,-10.03315 12.36565,11.28664 36.33239,-3.13024c23.96674,-14.41688 39.71634,7.66818 63.02115,5.65935c23.30481,-2.00883 21.47013,-10.21842 52.06854,1.35668c15.299205,5.78755 43.738287,0.533167 60.634511,-6.724944c16.896224,-7.258111 32.249589,2.480049 45.377359,4.252684c26.25554,3.54527 29.59355,-4.80237 42.96199,-9.06349l2.60508,90.15256l-303.86302,1.01074"
				 dataid="wave2" dheight="50" fill="url(#svg_48)" id="svg_50" showrank="10" stroke="#a7d3a9" stroke-fill="0"
				 stroke-img="0" stroke-width="0" />
				<path d="m73,354l0,100l70,-1l0,-99" dataid="wave_box" dheight="50" fill="none" id="svg_35" showrank="10" stroke="#474545"
				 stroke-dasharray="null" stroke-fill="0" stroke-img="0" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="0.8"
				 stroke-width="2" />
</g>
 <script>
 function addWave() {
	//获取波浪容器，拿到所有的path
	let waveGroup = document.querySelector('#liquid_box')
	waveGroup.setAttribute('class', 'irrigate-svg')
	let wavePaths = waveGroup.querySelectorAll('path');
	//创建蒙版
	let waveDef = document.createElementNS('http://www.w3.org/2000/svg', 'defs')
	let waveMask = document.createElementNS('http://www.w3.org/2000/svg', 'mask')
	waveMask.setAttribute('id', 'myMask')
	wavePaths.forEach(path => {
		if (path.getAttribute('dataid') === 'wave_box') {
			//将蒙版设置在对应path上
			let pathClone=path.cloneNode(true)
			pathClone.setAttribute('fill', 'white')
			waveMask.appendChild(pathClone)
		} else {
			//如果是波浪，给path添加动画属性
			path.setAttribute('class', 'irrigate-rate')
		}
	})
	//将蒙版元素添加到根元素上
	waveDef.appendChild(waveMask)
	rootElt.appendChild(waveDef)
}
 </script>

//  css样式
.irrigate-svg {
	-webkit-mask: url(#myMask);
	mask: url(#myMask);
	width: 200px;
	height: 200px;
  overflow: hidden;
}
.irrigate-rate {
  animation: wavingleft 6s linear infinite;
}
.irrigate-rate:last-child {
    animation: wavingright 6s linear infinite;
}
@keyframes wavingleft {
0% {
  transform: translateX(-20px);
}
50% {
  transform: translateX(30px);
}
100% {
  transform: translateX(-20px);
}
}
@keyframes wavingright {
0% {
  transform: translateX(30px);
}
50% {
  transform: translateX(-20px);
}
100% {
  transform: translateX(30px);
}
} 

效果展示： 静态截图，动态还不太会弄。

<g class="layer" display="inline" id="liquid_box">
			 <title>liquid_box</title>
			 <rect dataid='water' addDevice="0" deviceID="null" deviceTel="null" dheight="50" fill="#a7d3a9" height="78" id="svg_28" isGateway="0" isPOI="0" normalstatusVal="0" showrank="10" stroke="#666666" stroke-dasharray="null" stroke-fill="0" stroke-img="0" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" switchStatus="0" width="67.999997" x="74.000003" y="374.5"/>
			 <path d="m73,354l0,100l70,-1l0,-99" dataid="wave_box" dheight="50" fill="none" id="svg_35" showrank="10" stroke="#474545" stroke-dasharray="null" stroke-fill="0" stroke-img="0" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="0.8" stroke-width="2"/>
</g>

let getWaterBox = document.querySelector('#liquid_box')
let water = getWaterBox.querySelector('rect');
let waterBox=getWaterBox.querySelector('path');
water.setAttribute('class', 'waterflow')
getWaterBox.setAttribute('class', 'waterBox')
//创建蒙版
let waveContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g')
let waveDef = document.createElementNS('http://www.w3.org/2000/svg', 'defs')
let waveMask = document.createElementNS('http://www.w3.org/2000/svg', 'mask')
waveMask.setAttribute('id', 'myMask')
let waterClone=waterBox.cloneNode(true)
waterClone.setAttribute('fill', 'white')
waveMask.appendChild(waterClone)
waveDef.appendChild(waveMask)
waveContainer.appendChild(waveDef)
rootElt.appendChild(waveContainer)

.waterBox {
	-webkit-mask: url(#myMask);
	mask: url(#myMask);
	width: 68px;
	height: 78px;
	overflow: hidden;
}

.waterflow {
	animation: water_flow 6S linear infinite;
}

@keyframes water_flow {
	0% {
		transform: translateY(10px);
	}

	50% {
		transform: translateY(50px);
	}

	100% {
		transform: translateY(10px);
	}
}

效果展示，水位动态上涨下降

上面那种写法会出现跨域问题，可以这样写

// getWaterBox.setAttribute('class', 'waterBox')//这个样式就可以不用加啦 
getWaterBox.setAttribute('mask', 'url(#myMask)')

看了这位大佬写的更明白了