实现一个svg和图片完全重叠的类似地图效果

如图所示,建筑是一张png图片,闪烁的遮罩是svg元素.svg使用绝对定位,实现了任意缩放状态下,svg遮罩和png图片不错位,从而实现一个简单的可以交互的类似地图功能.

vue代码如下:

<template>
  <div class="container">
    <img src="../../assets/map.png" alt="">
		
		
		<svg v-if="maskShow" class="svgMask" version="1.1" viewBox="0 0 826 386">
		 <g>
			 <!-- 室外生活区 -->
		  <polygon v-show="selectArea==1" class="fil0" points="56,211 131,195 130,189 242,164 222,120 21,161 "/>
			<!-- 室内隔离区 -->
		  <polygon v-show="selectArea==2" class="fil1" points="167,188 243,273 309,255 225,175 "/>
		  <polygon v-show="selectArea==2" class="fil1" points="240,149 282,187 328,176 284,139 "/>
		  <polygon v-show="selectArea==2" class="fil1" points="292,197 350,248 411,231 350,183 "/>
			<!-- 生产区 -->
		  <polygon v-show="selectArea==3" class="fil2" points="279,111 361,173 376,195 421,229 724,150 536,60 "/>
			<!-- 环保区 -->
		  <path v-show="selectArea==4" class="fil3" d="M545 62c-1,2 44,-8 44,-8l111 51 -48 12 -107 -55z"/>
		 </g>
		</svg>
		
  </div>
</template>

<script>
export default {
  name: 'middleBottom',
  props: {

  },
	data() {
		return {
			maskShow: true
		}
	},
	computed: {
	  selectArea () {
	    return this.$store.state.selectArea
	  }
	},
	watch: {
		selectArea(newVal, oldVal) {
			// 利用dom重新渲染,让其播放动画
			this.maskShow = false
			this.$nextTick(()=> {
				this.maskShow = true
			})
		}
	},
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	height: 450px;
	display: flex;
	img {
		margin: auto;
		width: 100%;
	}
	.svgMask {
		width: 100%;
		height: 100%;
		position: absolute;
		.fil1 {fill:#008FD7;fill-opacity:0.5}
		.fil3 {fill:#009B4C;fill-opacity:0.5}
		.fil2 {fill:#B04B87;fill-opacity:0.5}
		.fil0 {fill:#E62129;fill-opacity:0.5}
		animation: blink .5s linear;
		animation-iteration-count:2;
	}
}
@keyframes blink {
	from {opacity: 1;}
	to {opacity: 0;}
}
</style>

svg代码是用cdr画完后导出的,绘制时新建一个跟图片大小一致的画布,导入png图片,将其放置在正好覆盖画布的位置,根据图片中区域的位置绘制闪烁区域的矢量图,绘制完毕后删除png图,导出为svg格式.
用编辑器打开导出的文件,删除一些荣誉的代码,只保留如以上svg代码就够了.
如代码所示:img元素保持垂直居中,任何缩放状态下宽度100%,使其能够完整显示,svg遮罩部分宽高都要设置为100%,并且使用绝对定位.
这样以来感觉好像svg图会被拉伸而变形,但实际上不会,因为svg标签里有一个重要的属性:viewBox.一定要设定的跟图片像素一致.viewBox的具体概念类似浏览器一样,浏览器窗口始终只能看到网页的一部分,viewBox的作用就是设定这个窗口的位置.
肯定还有其他方式实现此功能,但我试了一会,就发现这种方式比较完美.
遮罩闪烁动画是靠销毁再创建元素而实现的.可能会浪费一些性能,但代码简单.
svg元素跟普通dom元素一样很容易实现交互,在此基础之上就可以实现一个简单的地图类应用.