Question

我有一些svg圆，其属性为data-label =“ blueCircle”等。我想将它们设置为svg文本对象的innerHTML，并基于mouseOver函数在HTML页面上显示它们。 MouseOut函数应删除文本。

HTML：

<html>
<body> 
<svg width="200" height="200">

  <circle cx="50" cy="50" r="10" stroke="black" stroke-width="3" fill="blue" data-label="blueCircle"/>
  <circle cx="80" cy="50" r="10" stroke="black" stroke-width="3" fill="yellow" data-label="yellowCircle"/>
  <circle cx="110" cy="50" r="10" stroke="black" stroke-width="3" fill="green" data-label="greenCircle"/>
  <text x="50" y="80" font-family="sans-serif" font-size="15px" fill="black"></text>

</svg>
</body>
</html>

JavaScript就像这样，但是试图将值从data-label放入svg文本innerHTML的那部分不起作用。

function mouseOver(element) {
  var txt = element.dataset.label; //or element.target.dataset.label ?
  document.querySelectorAll("text").innerHTML = txt; //not sure about this part at all
}

function mouseOut(element) {
  document.querySelectorAll("text").innerHTML = "";
}

const CIRCLES = document.querySelectorAll("circle")

for (CIRCLE of CIRCLES) {
  CIRCLE.addEventListener("mouseover", mouseOver);
  CIRCLE.addEventListener("mouseout", mouseOut);
}

那么如何在鼠标悬停在圆圈上的同时获取数据标签值以svg文本？

谢谢

如何在JavaScript中将element.dataset值绑定到svg文本innerHTML onmouseover？

0 个答案: