前端实现一个简单的svg定制地图

实现的效果

身为一个三线小城市的开发者，开发管理类的前端项目，必须有一个首页大屏页面，因为领导们都喜欢看这个，于是参考别人的项目也做了一个。
中间的地图模块有点意思，载入的是一张网络上的图片，使用svg技术画了建筑的边框，然后就可以像操作dom一样触发交互了。
中间地图可以换成任何图片，比如大楼的设计图，厂区的平面图等等，实现定制化地图的开发。
绘制svg用的软件是cdr，画布使用像素做单位，将图片载入cdr中，然后绘制轮廓图，导出svg格式的文件就可以在项目中使用了，说起来挺简单，但是学习cdr还是要花点时间的。

地图代码

一想到用代码去画图就很蛋疼，偶然发现cdr可以导出svg格式的文件，本人业余时间喜欢搞点设计绘画什么的，正好派上用场，研究了一下午svg技术，上手做了个这个小东西，给有需求的同学们做个参考。
地图模块没有做窗口自适应。
此项目的框架使用vue。
这是index.vue

<template >
  <div class="chartMain">
    <!-- 闪烁的小方格 -->
    <svg class="commu" width="300px" height="35px" style="transform: scale(0.666667, 0.571429);"><rect fill="#7acaec" x="8.038461538461538" y="8.166666666666666" width="7" height="7"></rect><rect fill="#7acaec" x="19.576923076923077" y="8.166666666666666" width="7" height="7"><animate attributeName="fill" values="#7acaec;transparent" dur="1.3509551554555508s" begin="0.9979486091755545" repeatCount="indefinite"></animate></rect><rect fill="#7acaec" x="31.115384615384613" y="8.166666666666666" width="7" height="7"><animate attributeName="fill" values="#7acaec;transparent" dur="1.7637955340176938s" begin="1.6805424644533238" repeatCount="indefinite"></animate></rect><rect fill="#7acaec" x="42.65384615384615" y="8.166666666666666" width="7" height="7"></rect><rect fill="#7acaec" x="54.19230769230769" y="8.166666666666666" width="7" height="7"><animate attributeName="fill" values="#7acaec;transparent" dur="1.3747094662786s" begin="0.19808113937130178" repeatCount="indefinite"></animate></rect><rect fill="#7acaec" x="65.73076923076923" y="8.166666666666666" width="7" height="7"><animate attributeName="fill" values="#7acaec;transparent" dur="1.3582927763248147s" begin="0.3826910406214452" repeatCount="indefinite"></animate></rect><rect fill="#7acaec" x="77.26923076923077" y="8.166666666666666" width="7" height="7"><animate attributeName="fill" values="#7acaec;transparent" dur="1.2356613685960556s" begin="0.906340497984393" repeatCount="indefinite"></animate></rect><rect fill="#7acaec" x="88.8076923076923" y="8.166666666666666" width="7" height="7"><animate attributeName="fill" values="#7acaec;transparent" dur="1.190398572665799s" begin="0.31425562628166226" repeatCount="indefinite"></animate></rect><rect fill="#7acaec" x="100.34615384615384" y="8.166666666666666" width="7" height="7"></rect><rect fill="#7acaec" x="111.88461538461539" y="8.166666666666666" width="7" height="7"><animate attributeName="fill" values="#7acaec;transparent" dur="1.7610740681880848s" begin="0.9188888980921393" repeatCount="indefinite"></animate></rect><rect fill="#7acaec" x="123.42307692307692" y="8.166666666666666" width="7" height="7"><animate attributeName="fill" values="#7acaec;transparent" dur="1.8660856952000844s" begin="1.1529554149565775" repeatCount="indefinite"></animate></rect><rect fill="#7acaec" x="134.96153846153845" y="8.166666666666666" width="7" height="7"></rect><rect f