调试工具
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 00 0 1 0 00 0 1 0 00 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 01 0 0 0 01 0 0 0 00 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 00 1 0 0 00 1 0 0 00 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') //}}
使用前
使用后
