Изменить координаты SVG <g /> при наведении

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");
}

Я пытался перевести элемент g, используя setAttribute и меняя значения x, y атрибута translate, но я получил только последнее значение позиции.Как сделать это динамически для каждой позиции?

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>

Answer 2

Одним из решений является просто передать i в вашу функцию show().

for (let i = 0; i < circles.length; i++) {  // <-- change "var" to "let"
    circles[i].addEventListener('mousemove', function() { show(i) });
    circles[i].addEventListener('mouseout', hide);
}

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

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

var svgDoc = document.querySelector("svg");
var poligon = svgDoc.getElementById("poligon")

for (let i = 0; i < coordinateX.length; i++) {
  var circle = document.createElementNS(svgDoc.namespaceURI, "circle");
  circle.setAttribute("cx", coordinateX[i]);
  circle.setAttribute("cy", coordinateY[i]);
  circle.setAttribute("r", "5");
  svgDoc.appendChild(circle);

  circle.addEventListener('mousemove', function() { show(i); } );
  circle.addEventListener('mouseout', hide);
}



function show(i) {
  poligon.setAttribute("transform","translate(" + coordinateX[i] + ", " + coordinateY[i] + ")");
  poligon.setAttribute("visibility", "visible");
}

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

<svg width="400" height="400" viewBox="0 0 200 200">

  <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>

</svg>