javascript - 更改 SVG悬停坐标

Question

我有 x 和 y 坐标数组：

var coordinateX = [10,20,30,40,50,....];
var coordinateY = [10,20,30,40,50,....]:

这些坐标是圆心，当我将鼠标悬停在圆上时，我想在其中显示工具提示。

for (var i = 0; i < circles.length; i++) {
    circles[i].addEventListener('mousemove', show);
    circles[i].addEventListener('mouseout', hide);
}

工具提示表示为 g 元素，其中包含矩形和文本

<g id="poligon" visibility="hidden" class="element">
  <rect width="80" height="20" fill="white"/>
  <text class="tooltip" x="4" y="15" dominant-baseline="centered">Tooltip</text>
</g>

var poligon = svgDoc.getElementById("poligon")

function show(evt) {
  poligon.setAttributeNS(null, "transform","translate(" + coordinateX[i] + ", " + coordinatey[i] + ")");
  poligon.setAttributeNS(null, "visibility", "visible");
  textTooltipVrijednost.data = evt.target.getAttributeNS(null, "class");    
}

function hide(){
  poligon.setAttributeNS(null, "visibility", "hidden");
}

我尝试使用setAttribute和更改 translate 属性的 x、y 值来翻译 g 元素，但我只得到最后一个位置值。如何为每个职位动态执行此操作？

标签： javascriptsvg

Answer 1

正如我所评论的，一个更好的主意是使用 html 元素作为工具提示。这样，当文本可能变得太小以至于您无法阅读时，当 svg 元素的尺寸很小时，您就不会遇到问题。

主要思想是检测鼠标在 svg 元素上的位置。如果鼠标进入一个圆圈，则工具提示变为可见并占据鼠标的位置。在这种情况下也显示圆的坐标。当鼠标离开圆圈时，工具提示的显示会回到none。

我希望它有所帮助。

const SVG_NS = 'http://www.w3.org/2000/svg';
let coordinates = [{cx:10,cy:7,r:5},{cx:10,cy:30,r:5},{cx:50,cy:10,r:5},{cx:33,cy:25,r:5}]

let circles = []

coordinates.forEach(c=>{
  circles.push(drawCircle(c, svg))
})

circles.forEach((c,i)=>{
  c.addEventListener("mouseenter",(e)=>{
    let m = oMousePos(svg, e);
    let cx = coordinates[i].cx;
    let cy = coordinates[i].cy;
    tooltip.style.display = "block"
    tooltip.style.left = m.x+"px";
    tooltip.style.top = m.y+"px";
    tooltip.innerHTML = `${cx}, ${cy}`
  })
  c.addEventListener("mouseleave",(e)=>{
    tooltip.style.display = "none"
  })
})




function drawCircle(o, parent) {

  var circle = document.createElementNS(SVG_NS, 'circle');
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      circle.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(circle);
  return circle;
}



function oMousePos(svg, evt) {
      var ClientRect = svg.getBoundingClientRect();
                return { //objeto
                x: Math.round(evt.clientX - ClientRect.left),
                y: Math.round(evt.clientY - ClientRect.top)
      }
}

svg {
  border: 1px solid;
  width:100vh;
}
#wrap {
  position: relative;
}
#tooltip {
  position: absolute;
  width: 80px;
  height: 30px;
  background: white;
  border: 1px solid;
  text-align: center;
  line-height: 30px;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
}

<div id="wrap">
<svg id="svg" viewBox="0 0 60 40"></svg>

<div id="tooltip">0,0</div>
  
</div>