Добавить пользовательский атрибут в SVG? - PullRequest
Новая
       73

Добавить пользовательский атрибут в SVG?

0 голосов
/ 25 марта 2020

Я пробовал несколько способов сделать это, но я не заставляю его работать. Я хотел бы знать, есть ли способ установить пользовательские атрибуты для элемента SVG. Мой код: 

var svgns = "http://www.w3.org/2000/svg";
var rect = document.createElementNS(svgns,'rect');
rect.setAttributeNS(null, 'x', 0);
rect.setAttributeNS(null, 'y', 0);
rect.setAttributeNS(null, 'height', 20);
rect.setAttributeNS(null, 'width', 20);
rect.setAttributeNS(null, 'fill', 'blue');
rect.setAttributeNS(null, 'id', '999');

// my attempt here
rect.setAttributeNS(null, 'foo', 'bar');

rect.addEventListener('click',
    function() {
        alert(this.foo);
    }
    ,false);

document.getElementById('yard').appendChild(rect);

Поэтому, когда я нажимаю на прямоугольник, он должен (по моим предположениям) предупредить значение атрибута 'foo'. Вместо этого он просто выводит undefined .

Любая подсказка?

1 Ответ

1 голос
/ 25 марта 2020

использовать this.getAttribute('foo'). 

var svgns = "http://www.w3.org/2000/svg";
var rect = document.createElementNS(svgns, 'rect');
rect.setAttributeNS(null, 'x', 0);
rect.setAttributeNS(null, 'y', 0);
rect.setAttributeNS(null, 'height', 20);
rect.setAttributeNS(null, 'width', 20);
rect.setAttributeNS(null, 'fill', 'blue');
rect.setAttributeNS(null, 'id', '999');

// my attempt here
rect.setAttributeNS(null, 'foo', 'bar');

rect.addEventListener('click',
  function() {
    alert(this.getAttribute('foo'));
  }, false);

document.getElementById('yard').appendChild(rect);
<svg id="yard"></svg>
...