vue+ svg实现水波纹

<!--
 * @Author: 潘多拉平
 * @Description:
-->
<template>
    <svg
        version="1.1"
        id="WaterBlueId"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        min-width="100%"
        height="203px"
        viewBox="10 50 200 140"
        style="enable-background: new 10 50 200 140"
        xml:space="preserve"
        preserveAspectRatio="xMinYMin meet"
    >
        <defs>
            <mask id="myMask2">
                <rect
                    width="500"
                    height="200"
                    style="fill: #fff; stroke: #fff; stroke-miterlimit: 0"
                />
            </mask>
        </defs>
        <g class="blue-masked">
            <g id="blue-irrigate-wrap">
                <linearGradient
                    id="Blue_SVGID_1_"
                    gradientUnits="userSpaceOnUse"
                    x1="1120.8899"
                    y1="262.1278"
                    x2="1120.8899"
                    y2="1.81"
                    gradientTransform="matrix(-1 0 0 -1 1430.8899 246)"
                >
                    <!-- 色值变化 -->
                    <stop
                        offset="0"
                        style="stop-color: #a13af6; stop-opacity: 0.8"
                    />
                    <stop
                        offset="1"
                        style="stop-color: #00ffff; stop-opacity: 0.7"
                    />
                </linearGradient>
                <path
                    class="blue-irrigate-rate"
                    style="fill: url(#Blue_SVGID_1_)"
                    d="M0-3.8c0,0,44.7-14.3,77-12.1c32.9,2.3,95.6,33.3,128.3,31.1c38.9-2.6,116.7-33.7,153-29.7
            c22.9,2.5,73,20.4,95.7,24.4c30.9,5.5,64.2,8.4,90.3,6.8C567.8,15.2,620-3.8,620-3.8v248H0V-3.8z"
                />
                <!-- <linearGradient
                    id="Blue_SVGID_2_"
                    gradientUnits="userSpaceOnUse"
                    x1="2348.3101"
                    y1="262.1278"
                    x2="2348.3101"
                    y2="1.81"
                    gradientTransform="matrix(1 0 0 -1 -2038.3101 246)"
                >
                    <stop
                        offset="0"
                        style="stop-color: #a13af6; stop-opacity: 0.8"
                    />
                    <stop
                        offset="1"
                        style="stop-color: #00ffff; stop-opacity: 0.7"
                    />
                </linearGradient>
                <path
                    class="blue-irrigate-rate"
                    style="fill: url(#Blue_SVGID_2_)"
                    d="M620-3.8c0,0-44.7-14.3-77-12.1c-32.9,2.3-95.6,33.3-128.3,31.1
            c-38.9-2.6-116.7-33.7-153-29.7c-22.9,2.5-73,20.4-95.7,24.4c-30.9,5.5-64.2,8.4-90.3,6.8C52.2,15.2,0-3.8,0-3.8v248h620V-3.8z"
                /> -->
            </g>
        </g>
        <g>
            <g id="WaterBlueId-2">
                <rect
                    width="500"
                    height="100%"
                    style="
                        fill: none;
                        stroke: url(#Blue_Blue_SVGID_3_);
                        stroke-width: 0;
                        stroke-linecap: round;
                        stroke-miterlimit: 10;
                    "
                />
            </g>
        </g>
    </svg>
</template>

<script>
export default {
    name: 'WaterBlue',
};
</script>
<style lang="less" scoped>
body {
    margin: 0 !important;
}
svg {
    border-radius: 8px;
}
.blue-masked {
    -webkit-mask: url(#myMask2);
    mask: url(#myMask2);
}
#blue-irrigate-wrap {
    transform: translateY(112px);
}
.blue-irrigate-rate {
    animation: wavingleft 6s linear infinite;
}
.blue-irrigate-rate:last-child {
    animation: wavingright 6s linear infinite;
}
@keyframes wavingleft {
    0% {
        transform: translateX(-50%);
    }
    50% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-50%);
    }
}
@keyframes wavingright {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0px);
    }
}
</style>