Как вы отправляете атрибуты в функции JavaScript в SVG

Question

У меня есть небольшие SVG-файлы, которые растут довольно быстро, и у меня есть эта небольшая функция:

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

И поэтому каждый мой элемент выглядит так:

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

Поэтому, когда мой элемент находится, он печатает его имя в тексте с идентификатором 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>