天地图svg滤镜自定义主题色要使用SVG Gradient Map Filter自定义天地图的主题颜色，并将其应用到天地

要使用SVG Gradient Map Filter自定义天地图的主题颜色，并将其应用到天地图的图片上，本文自己调了几个常用主题，你也可以自己尝试调配自己的主题

效果图_白色半透明1

在这里插入图片描述

效果图_白色半透明2

// 截至2025年1月2日地图图片放在这个div下面
// 所以如果有地图覆盖物的情况下建议这么使用
// 效果1
#mapDiv .tdt-tile-pane {
   filter: url('#mapFresh');
}
// 效果2,只改变地图图片样式，保留其它地标效果
 #mapDiv .tdt-tile-pane > div:first-child {
  filter: url('#mapLight');
}

<svg id="mapFreshFilter" 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>
<filter id="mapFresh" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
	<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.36 1"/>
		<feFuncG type="table" tableValues="0.49 1"/>
		<feFuncB type="table" tableValues="0.41 1"/>
		<feFuncA type="table" tableValues="0 0.7"/>
  	</feComponentTransfer>
	<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
   </defs>
</svg>

效果图_蓝色

.your-map-tile-class {
    filter: url('#custom-filter');
}

<body>
	<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>
	        <filter id="custom-filter" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
	            <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.84 0.2 0.07"/>
	                <feFuncG type="table" tableValues="0.85 0.33 0.11"/>
	                <feFuncB type="table" tableValues="0.81 0.53 0.33"/>
	                <feFuncA type="table" tableValues="0 1"/>
	            </feComponentTransfer>
	            <feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
	        </filter>
	    </defs>
	</svg>
</body>

效果图_白色

在这里插入图片描述

// 截至2025年1月2日地图图片放在这个div下面
// 所以如果有地图覆盖物的情况下建议这么使用
#mapDiv .tdt-tile-pane {
   filter: url('#mapLight');
}

<svg id="mapLightFilter" 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>
		    	<filter id="mapLight" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
		<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.11 1"/>
						<feFuncG type="table" tableValues="0.11 1"/>
						<feFuncB type="table" tableValues="0.11 1"/>
						<feFuncA type="table" tableValues="0 1"/>
				  	</feComponentTransfer>
					<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
				</filter>
	     </defs>
</svg>

效果图_灰黑

在这里插入图片描述

#mapDiv .tdt-tile-pane {
    filter: url('#mapGrey');
}

<svg id="mapGreyFilter" 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>
<filter id="mapGrey" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
	<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.51 0.47 0.22"/>
		<feFuncG type="table" tableValues="0.51 0.51 0.22"/>
		<feFuncB type="table" tableValues="0.51 0.57 0.22"/>
		<feFuncA type="table" tableValues="0 1"/>
  	</feComponentTransfer>
	<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
	     </defs>
</svg>

效果图_草绿

在这里插入图片描述

#mapDiv .tdt-tile-pane {
    filter: url('#mapGrey');
}

 <svg id="mapBlueFilter" 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>
<filter id="mapBlue" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
	<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.55 0.41 0.17"/>
		<feFuncG type="table" tableValues="0.55 0.75 0.31"/>
		<feFuncB type="table" tableValues="0.55 0.59 0.35"/>
		<feFuncA type="table" tableValues="0 1"/>
  	</feComponentTransfer>
	<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
	     </defs>
</svg>

效果图_黑蓝

在这里插入图片描述

  #mapDiv .tdt-tile-pane {
          filter: url('#mapDarkBlue');
      }

 <svg id="mapDarkBlueFilter" 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>
<filter id="mapDarkBlue" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
	<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.25 0.16 0.02"/>
		<feFuncG type="table" tableValues="0.27 0.2 0.02"/>
		<feFuncB type="table" tableValues="0.41 0.38 0.09"/>
		<feFuncA type="table" tableValues="0 1"/>
  	</feComponentTransfer>
	<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
	     </defs>
</svg>