css 添加svg滤镜

调试工具

https://yoksel.github.io/svg-gradient-map/#/
//通过svg调试工具，上传图片，然后调试滤镜，调试完成后，把右侧的代码复制出来，进行文章下一步操作

项目使用

   <svg id="svgfilters" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
      <!-- 把调试好的代码贴再此处，这里可以写多个，注意id是唯一的，需要再样式中调用-->
        <!-- <filter id="teal-white" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
          <feColorMatrix type="matrix" values="0 0 1 0 0
                    0 0 1 0 0
                    0 0 1 0 0
                    0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
          <feComponentTransfer in="colormatrix" result="componentTransfer">
                <feFuncR type="table" tableValues="1 0.11 0 0"/>
            <feFuncG type="table" tableValues="0 0.73 0.37 0"/>
            <feFuncB type="table" tableValues="0 0.89 0.74 0"/>
            <feFuncA type="table" tableValues="0 1"/>
            </feComponentTransfer>
          <feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
        </filter> -->
        <filter id="teal-white" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
          <feColorMatrix type="matrix" values="1 0 0 0 0
                    1 0 0 0 0
                    1 0 0 0 0
                    0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
          <feComponentTransfer in="colormatrix" result="componentTransfer">
                <feFuncR type="table" tableValues="0 0 1"/>
            <feFuncG type="table" tableValues="0.12 0.2 1"/>
            <feFuncB type="table" tableValues="1 1 1"/>
            <feFuncA type="table" tableValues="0 1"/>
            </feComponentTransfer>
          <feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
        </filter>
        <!-- <filter id="teal-white" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
          <feColorMatrix type="matrix" values="0 1 0 0 0
                    0 1 0 0 0
                    0 1 0 0 0
                    0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
          <feComponentTransfer in="colormatrix" result="componentTransfer">
                <feFuncR type="table" tableValues="0 0 1 0.44"/>
            <feFuncG type="table" tableValues="0.16 0.2 1 0.61"/>
            <feFuncB type="table" tableValues="1 1 1 1"/>
            <feFuncA type="table" tableValues="0 1"/>
            </feComponentTransfer>
          <feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
        </filter> -->
      </defs>
    </svg> 
  <!--   需要使用的div -->
 <div id="map" class="mapmode"></div>
   <!-- 使用svg滤镜,通过css添加滤镜到div上 -->
.mapmode{
    width: 100%;
    height: 100%;
    filter:url('#teal-white') //添加在mapmode元素上 ，使用的是id为teal-white的滤镜，这个可以根据自己的需要应用
    //::v-deep(.leaflet-layer .leaflet-tile-container img){
     // filter:url('#teal-white') 
    //}
  }

使用前

使用后