SVG图打点

这是我参与更文挑战的第4天，活动详情查看： 更文挑战

在平时的工作中 ，我们可能会遇到需要在SVG图上或是某个DOM上打点的需求，下面实现了在SVG图上打点的功能，如果需要在其他DOM上打点也可以参照此方法。

说一下思路：
一、如何在SVG图片里再插入图片

1. 要想在SVG图上打点，首先想着怎么在SVG图片里插入图片，创建一个SVG的image标签

const svgImgDom = document.createElementNS(
    'http://www.w3.org/2000/svg',
    'image',
  );

2. 然后引入图片，设置图片的宽高，并添加class,这都可以用setAttributeNS() 来实现
3. 之后可以通过appendChild()将带有图片信息的svgImgDom插入到SVG图片中

二、插入图片的位置

1. 获取svg图片针对整个窗口的页面偏移量

 const svgDom = this.$refs.svgBox;
  const svgOffset = {
    x: svgDom.getBoundingClientRect().left,
    y: svgDom.getBoundingClientRect().top,
  };

2. svg页面缩放系数

 const pageScale = {
    x: 752.333 / svgDom.offsetWidth,　// svg标签内viewBox的值
    y: 430 / svgDom.offsetHeight,
  };

3.鼠标偏移量 （缩放页面后正确的鼠标位置）

// 这里 svgDom.offsetWidth/21 和 svgDom.offsetHeight/2.77  宽高相除的比例可以根据实际点位灵调整，
// 有了整个缩放比例，当窗口size更改时也可以自动适用点位的偏移
const mouseOffset = {
    x: ((e.pageX + svgDom.offsetWidth/21) - svgOffset.x) * pageScale.x, 
    y: ((e.pageY + svgDom.offsetHeight/2.77) -  svgOffset.y) * pageScale.y,
  };

下面是完整的代码
HTML

<div @click="clickPoint" class="svgBox" id="svgBox" ref="svgBox">
  <svg id='SVGDom' class='SVGDom' version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
   y="0px" viewBox="78 205.89 752.333 430" style="enable-background:new 78 205.89 752.333 430;" xml:space="preserve">
  </svg>
</div>

JS部分

clickPoint(e) {
  const svgDom = this.$refs.svgBox;
  const svgOffset = {
    x: svgDom.getBoundingClientRect().left,
    y: svgDom.getBoundingClientRect().top,
  };
  const pageScale = {
    x: 752.333 / svgDom.offsetWidth,　// svg标签内viewBox的值
    y: 430 / svgDom.offsetHeight,
  };
  const mouseOffset = {
    x: ((e.pageX + svgDom.offsetWidth/21) - svgOffset.x) * pageScale.x, 
    y: ((e.pageY + svgDom.offsetHeight/2.77) -  svgOffset.y) * pageScale.y,
  };
  const svgImgDom = document.createElementNS(
    'http://www.w3.org/2000/svg',
    'image',
  );
  svgImgDom.setAttributeNS(null, 'height', '50');
  svgImgDom.setAttributeNS(null, 'width', '50');
  svgImgDom.setAttributeNS(
    'http://www.w3.org/1999/xlink',
    'href',
    require('../../assets/greenPoint.jpeg'),
  );
  svgImgDom.setAttributeNS(null, 'x', mouseOffset.x);
  svgImgDom.setAttributeNS(null, 'y', mouseOffset.y);
  svgImgDom.setAttributeNS(null, 'class', 'addPointImgs');
  document.getElementById('SVGDom').appendChild(svgImgDom);

// 删除图标
  const className = e.target.classList[0];
  if (className === 'addPointImgs') {
    this.deletePointFun(e);
  }
},
// 删除点位
deletePointFun(e) {
  const el = e.target;
  this.$confirm('确定删除该点位信息吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    this.$message({
      type: 'success',
      message: '删除成功!',
    });
    el.remove();
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '已取消删除',
    });
  });
},