设置背景图片svg的颜色

逛别人的博客,发现有个特效挺好看,就想把他剥下来,放到我的博客上. 经过一番操作,成功将效果复制下来.

大致的代码如下: 首先是两个波浪图:

• water-1.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="600px" height="60px" viewBox="0 0 600 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <g id="-" sketch:type="MSArtboardGroup" transform="translate(-121.000000, -133.000000)" fill-opacity="0.3">
        <g id="water-1" sketch:type="MSLayerGroup" transform="translate(121.000000, 133.000000)">
            <path d="M0,7.69857395 L4.67071962e-15,60 L600,60 L600,7.35230461 C600,7.35230461 432.721052,24.1065138 290.48404,7.35674187 C148.247027,-9.39303008 0,7.69857395 0,7.69857395 Z" id="Path-1" sketch:type="MSShapeGroup"></path>
        </g>
    </g>
</svg>

• water-2.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="600px" height="60px" viewBox="0 0 600 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.4 (15575) - http://www.bohemiancoding.com/sketch -->
    <g id="-" sketch:type="MSArtboardGroup" transform="translate(-121.000000, -246.000000)">
        <g id="water-2" sketch:type="MSLayerGroup" transform="translate(121.000000, 246.000000)">
            <path d="M0,7.69857395 L4.67071962e-15,60 L600,60 L600,7.35230461 C600,7.35230461 432.721052,24.1065138 290.48404,7.35674187 C148.247027,-9.39303008 0,7.69857395 0,7.69857395 Z" id="Path-2" sketch:type="MSShapeGroup" transform="translate(300.000000, 30.000000) scale(-1, 1) translate(-300.000000, -30.000000) "></path>
        </g>
    </g>
</svg>

然后通过动画,实现波浪效果

<template>
    <div class="bg-shadow">
        <div class="water-box">
            <div class="water-1"></div>
            <div class="water-2"></div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    
.bg-shadow {
    height: 30px;
    width: 100%;
    position: absolute;
    z-index: 3;
    .water-box {
        .water-1 {
            height: 30px;
            width: 100%;
            position: absolute;
            background: url(@/assets/images/water-1.svg) repeat-x;
            background-size: 600px;
            -webkit-animation: water-animation 6s infinite linear;
            animation: water-animation 3.6s infinite linear;
        }
        .water-2 {
            height: 30px;
            width: 100%;
            position: absolute;
            background: url(@/assets/images/water-2.svg) repeat-x;
            background-size: 600px;
            -webkit-animation: water-animation 6s infinite linear;
            animation: water-animation 6s infinite linear;
        }
    }
}

@keyframes water-animation {
    0% {
        background-position: 0 top;
    }
    100% {
        background-position: 600px top;
    }
}
</style>

不错,完成收工,又是美好的一天啊...
当然不可能的!!
我发现一个问题,就是这个东西不能动态变色儿...
于是开启了众里寻他千百度的旅程...
于是找到了css 遮罩. 特此记录一下:

<template>
    <div class="bg-shadow">
        <div class="water-box">
            <div class="water-1"></div>
            <div class="water-2"></div>
        </div>
    </div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
$bg-color: #fff;
.bg-shadow {
    height: 30px;
    width: 100%;
    position: absolute;
    z-index: 3;
    .water-box {
        .water-1 {
            height: 30px;
            width: 100%;
            position: absolute;
            background-color: $bg-color;
            -webkit-mask: url(@/assets/images/water-1.svg) repeat-x;
            mask: url(@/assets/images/water-1.svg) repeat-x;
            background-size: 600px;
            -webkit-animation: water-animation 6s infinite linear;
            animation: water-animation 3.6s infinite linear;
        }
        .water-2 {
            height: 30px;
            width: 100%;
            position: absolute;
            background-color: $bg-color;
            -webkit-mask: url(@/assets/images/water-2.svg) repeat-x;
            mask: url(@/assets/images/water-2.svg) repeat-x;
            background-size: 600px;
            -webkit-animation: water-animation 6s infinite linear;
            animation: water-animation 6s infinite linear;
        }
    }
}

@keyframes water-animation {
    0% {
        mask-position: 0 top;
        -webkit-mask-position: 0 top;
    }
    100% {
        mask-position: 600px top;
        -webkit-mask-position: 600px top;
    }
}
</style>

svg作为遮罩,不用去关心它是什么色儿,最终的颜色由backgroup-color来决定