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>

如何将属性发送到svg

1 个答案: