svg打点定位

Question

把图片动态添加到点击的位置，但是图片位置总是相对点击的坐标添加．例如：点击的坐标是相对标签的x,y,图片的位置是相对点击的x,y．

项目要求可以在svg图片上打点定位，以下是我的代码

//动态添加图片

function test(evet) {
    var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
    svgimg.setAttributeNS(null,'height','20');
    svgimg.setAttributeNS(null,'width','20');
    svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href', 'img/jianweixiu.png');
    //如果用固定值可以正常相对标签定位
    //svgimg.setAttributeNS(null,'x',20);
    //svgimg.setAttributeNS(null,'y',20);
    
    //用下方的event.offset，就会相对点击位置定位．为什么
    svgimg.setAttributeNS(null,'x',event.offsetX);
    svgimg.setAttributeNS(null,'y',event.offsetY);

    svgimg.setAttributeNS(null, 'visibility', 'visible');
    document.getElementById('svg-box').appendChild(svgimg);
    console.log(event);
    console.log(event.offsetX,event.offsetY);
}
$("#XMLID_26_").click(function (evet) {
    test(evet);
});

我希望可以点击哪个位置，图片就加到哪个位置．因为第一次使用svg，很多地方不太懂，请问这样的话应该怎么做呢？谢谢

Answer 1

实现的代码：需要添加相应的计算方法后，才能作为点位坐标

    // svg页面偏移量
    const svgOffset = {
      x: $($this.$refs.svgTag).offset().left,
      y: $($this.$refs.svgTag).offset().top,
    };
    // svg页面缩放系数
    const pageScale = {
    // 995.667和430是svg标签viewBox的值　viewBox="0 0 995.667 430"
      x: 995.667 / $($this.$refs.svgTag).width(),
      y: 430 / $($this.$refs.svgTag).height(),
    };
    // 鼠标偏移量 （缩放页面后正确的鼠标位置）
    const mouseOffset = {
      x: ((event.pageX - 15) - svgOffset.x) * pageScale.x,
      y: ((event.pageY - 23) - svgOffset.y) * pageScale.y,
    };
    console.log(mouseOffset);
    const svgimg = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'image',
    );
    svgimg.setAttributeNS(null, 'height', '20');
    svgimg.setAttributeNS(null, 'width', '20');
    svgimg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', potinImgName);// potinImgName 添加的图片名称
    svgimg.setAttributeNS(null, 'x', mouseOffset.x);
    svgimg.setAttributeNS(null, 'y', mouseOffset.y);
    svgimg.setAttributeNS(null, 'data-x', mouseOffset.x);
    svgimg.setAttributeNS(null, 'data-y', mouseOffset.y);
    svgimg.setAttributeNS(null, 'class', `addPointImgs ${pointClass}`);
    svgimg.setAttributeNS(null, 'visibility', 'visible');
    document.getElementById('pointSVG').appendChild(svgimg);
  }
  $(this.$refs.svgTag)
    .find('#pointSVG')
    .click(clickPointSVG);