效果：
实现可配置图像大小、水面高度、波浪高度、波浪速度等
<template><div class="wave-svg" :style="`width:${width}px;height:${height}px;`"><div style="width:100%;height:100%;"><svg version="1.1" xmlns="/2000/svg" xmlns:xlink="/1999/xlink" xml:space="preserve" :width="width" :height="height" :viewbox="`0 0 ${width} ${height}`"><defs><linearGradient id="line1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#3DCDEA;stop-opacity:1"/><stop offset="100%" style="stop-color:#0070EA; stop-opacity:1"/></linearGradient></defs><defs><linearGradient id="line2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#4AB5FF;stop-opacity:1"/><stop offset="100%" style="stop-color:#3686FF; stop-opacity:1"/></linearGradient></defs><defs><linearGradient id="line3" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#49A1FF;stop-opacity:1"/><stop offset="100%" style="stop-color:#3686FF;stop-opacity:1"/></linearGradient></defs><path v-if="topLinePath" :d="topLinePath" stroke="transparent" fill="url(#line3)"><animateTransform attributeType="XML" attributeName="transform" begin="0s" :dur="`${speedTop}s`" type="translate" from="0 0" :to="`${bulgeDistance*4} 0`" repeatCount="indefinite" /></path><path v-if="centerLinePath" :d="centerLinePath" stroke="transparent" fill="url(#line2)"><animateTransform attributeType="XML" attributeName="transform" begin="0s" :dur="`${speedCenter}s`" type="translate" from="0 0" :to="`${bulgeDistance*4} 0`" repeatCount="indefinite" /></path><path v-if="bottomLinePath" :d="bottomLinePath" stroke="transparent" fill="url(#line1)"><animateTransform attributeType="XML" attributeName="transform" begin="0s" :dur="`${speedBottom}s`" type="translate" from="0 0" :to="`${bulgeDistance*4} 0`" repeatCount="indefinite" /></path></svg></div></div></template><script>export default {props:{width:{type:Number,//图像宽度default:450},height:{type:Number,//图像高度default:400},waterHeight:{type:Number,//水面高度default:360},bulgeHeight:{type:Number,//波浪起伏高度default:15},bulgeDistance:{type:Number,//波浪起伏间隔default:30},lineDistance:{type:Number,//三条线的距离default:20},speedTop:{type:Number,//第一根线速度default:1},speedCenter:{type:Number,//第一根线速度default:1},speedBottom:{type:Number,//第一根线速度default:1},},data(){return{topLinePath:null,centerLinePath:null,bottomLinePath:null,}},mounted(){this.init()},methods:{init(){let num = Math.floor(this.width/this.bulgeDistance)let basicPoint = this.height - this.waterHeightlet basicPointCenter = this.height - this.waterHeight + this.lineDistancelet basicPointBottom = this.height - this.waterHeight + this.lineDistance*2let topLinePath = `M ${-4*this.bulgeDistance} ${basicPoint} Q ${-3*this.bulgeDistance} ${basicPoint - this.bulgeHeight} ${-2*this.bulgeDistance} ${basicPoint} T 0 ${basicPoint}`for(var i=1;i<num;i++){topLinePath += ` T ${this.bulgeDistance*i*2} ${basicPoint} `}topLinePath += `v ${this.height} h -${3*num*this.bulgeDistance} z`let centerLinePath = `M ${-5*this.bulgeDistance} ${basicPointCenter} Q ${-4*this.bulgeDistance} ${basicPointCenter - this.bulgeHeight} ${-3*this.bulgeDistance} ${basicPointCenter} T ${-this.bulgeDistance} ${basicPointCenter}`for(var i=1;i<num;i++){centerLinePath += ` T ${-this.bulgeDistance + this.bulgeDistance*i*2} ${basicPointCenter} `}centerLinePath += `v ${this.height} h -${3*num*this.bulgeDistance} z`let bottomLinePath = `M ${-4*this.bulgeDistance} ${basicPointBottom} Q ${-3*this.bulgeDistance} ${basicPointBottom - this.bulgeHeight} ${-2*this.bulgeDistance} ${basicPointBottom} T 0 ${basicPointBottom}`for(var i=1;i<num;i++){bottomLinePath += ` T ${this.bulgeDistance*i*2} ${basicPointBottom} `}bottomLinePath += `v ${this.height} h -${3*num*this.bulgeDistance} z`this.topLinePath = topLinePaththis.centerLinePath = centerLinePaththis.bottomLinePath = bottomLinePath}},watch:{waterHeight(){this.init()}}}</script><style lang="scss">// .wave-svg{// width: 100%;// height: 100%;// }</style>
