svg效果之文字贴合纹理

效果如下，文字随着背景明暗变化

 

<svg viewBox="0 0 660 300">
        <defs>
          <filter id="comform">
            <feImage :href="image1" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="ORIGIN_IMAGE"></feImage>
            <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.9 0" in="ORIGIN_IMAGE" result="GRAY_IMAGE"></feColorMatrix>
            <feDisplacementMap in="SourceGraphic" in2="GRAY_IMAGE" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap>
            <feBlend in="BG" in2="OPACITY_TEXT" MODE="multiply" result="BLENDED_TEXT"></feBlend>
        </filter>
        </defs>
        <image href="../../assets/moon.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></image>
        <text width="50%" height="50%" x="60" y="120" font-size="5em" font-weight="bold" text-anchor="left" fill="#000" :filter="`url(#comform)`">文字贴合背景</text>
      </svg>

　

<script lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import image1 from '/@/assets/moon.png';

export default {
  setup() {
    const back = () => {
      window.history.back();
    };

    return {
      back,
      image1,
    };
  },
};
</script>

　代码地址：https://gitee.com/yuexiayunsheng/vue3learn/blob/master/src/views/cssEffect/TextFitsBackground.vue