javascript - 你如何将属性发送到 svg 中的 javascript 函数

Question

我有一个小的 SVG 文件，它增长得非常快，我有这个小功能:

function displayName(name) {
    document.getElementById('label').firstChild.data = name;
}

所以我的每一个元素看起来都是这样的:

<ellipse id="MyElementName" onmouseover="displayName('MyElementName')" 

因此，每当我的元素悬停时，它都会在 id 为 label

的文本中打印其名称

但是因为我有一些可以悬停的元素，所以我想知道是否有捷径。像这样的东西:

<ellipse id="MyElementName" onmouseover="displayName('$id')" 

这样我就不必到处复制元素名称了。

有没有办法做到这一点，还是我需要为所有元素复制它们？

Answer 1

您可以使用事件监听器。

(橙色的故意没有id)

var svgs = document.getElementsByTagName('svg');
var display = document.getElementById('display');
for (var i = 0; i < svgs.length; i++) {
  svgs[i].addEventListener('mouseenter', function(e) {
    displayId(e.currentTarget);
  });
  svgs[i].addEventListener('mouseleave', function(e) {
    clearDisplay();
  });
}

function displayId(e) {
  if (e.id) {
    display.innerHTML = e.id;
  }
}

function clearDisplay() {
  display.innerHTML = '';
}

<svg height="100" width="100" id="red">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>
<svg height="100" width="100" id="green">
  <circle cx="50" cy="50" r="40" fill="green" />
</svg>
<svg height="100" width="100" id="blue">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>

<div id="display"></div>