SVG dot figure

This is the fourth day of my participation in the More text Challenge. For details, see more text Challenge

In our daily work, we may encounter the need to dot on an SVG diagram or a DOM, the following implementation of dot on an SVG diagram function, if you need to dot on other DOM can also refer to this method.

How to insert an image into an SVG image

1. How do you insert an image into an SVG image and create an SVG image tag

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

2. Then you bring in the image, set the width and height of the image, and add a class, all of which you can do with setAttributeNS()
3. SvgImgDom with image information can then be inserted into an SVG image with appendChild()

Insert the image position

1. Gets the page offset of an SVG image for the entire window

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

2. SVG page scale factor

Const pageScale = {x: 752.333 / svgdom.offsetwidth, y: 430 / svgdom.offsetheight,};Copy the code

3. Mouse offset (the correct mouse position after zooming the page)

// The ratio of the width and height to svgdom.offsetwidth /21 and svgdom.offsetheight /2.77 can be adjusted according to the actual point. Const mouseOffset = {x: ((e.pagex + svgdom.offsetwidth /21) -svgoffset.x) * pageScale. X, y: Y) * pageScale. Y,};Copy the code

Below is the complete code HTML

<div @click="clickPoint" class="svgBox" id="svgBox" ref="svgBox"> <div @click="clickPoint" class="svgBox" id="svgBox" ref="svgBox"> XMLNS = "http://www.w3.org/2000/svg" XMLNS: xlink = "http://www.w3.org/1999/xlink" x = "0 px" y = 0 px viewBox = "78 205.89 752.333 434 "style=" background:new 78 205.89 752.333 430;" xml:space="preserve"> </svg> </div>Copy the code

JS part

clickPoint(e) { const svgDom = this.$refs.svgBox; const svgOffset = { x: svgDom.getBoundingClientRect().left, y: svgDom.getBoundingClientRect().top, }; Const pageScale = {x: 752.333 / svgdom.offsetwidth, y: 430 / svgdom.offsetheight,}; const mouseOffset = { x: ((e.pageX + svgDom.offsetWidth/21) - svgOffset.x) * pageScale.x, y: 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); // Delete icon const className = e.target. ClassList [0]; if (className === 'addPointImgs') { this.deletePointFun(e); }}, // deletePointFun(e) {const el = e.target; This.$confirm(' Confirm ') {confirmButtonText: 'confirm ', cancelButtonText:' cancel ', type: 'warning',}).then(() => {this.$message({type: 'success', message: 'Deletion succeeded! '}); el.remove(); = > {}). The catch () enclosing $message ({type: 'info', the message: 'has been delete,}); }); },Copy the code