Чтение атрибутов SVG-элементов в HTML через JS - PullRequest
Новая
       51

Чтение атрибутов SVG-элементов в HTML через JS

3 голосов
/ 14 февраля 2012

У меня есть следующая разметка (HTML с собственным SVG): 

<!doctype html>
   <!-- ...    
        html-Elements 
        ... --> 
   <svg version="1.1" ... >
        <defs> <circle id="infop" cx="0" cy="0" r="9" /> </defs>
        <!-- ... 
             svg Elements
             ... --> 
        <svg> <!-- to have separate coordinate-system -->
            <g id="outSvg"></g>
        </svg>
    ...

js-метод выводит строку и несколько <use href="infotop"> элементов в #outSvg (чтобы стать графиком). Элементы <use> имеют onmouseover-Events для отображения всплывающих подсказок.

Теперь, когда дело доходит до получения координат в onmouseover-function из <use>, я сталкиваюсь с проблемами:

Я пробовал следующие разные подходы для получения значений: 

function showInfo(evt){

    console.log("target: "+evt.target);
    console.log("AttrNS: "+evt.target.getAttributeNS(null,"x"));
    console.log("Attrib: "+evt.target.getAttribute("x"));
    console.log("basVal: "+evt.target.x.baseVal.value);
    console.log("corrEl: "+evt.target.correspondingUseElement.x.baseVal.value);

производит следующий вывод: 

    //target -> ** [object SVGUseElement] in FF, in all other browsers: [object SVGElementInstance])
    //AttrNS -> Works only in FF
       // * Uncaught TypeError: Object #<SVGElementInstance> has no method 'getAttributeNS'
    //Attrib -> Works only in FF
       // * Uncaught TypeError: Object #<SVGElementInstance> has no method 'getAttribute'
    //basVal -> works only in FF
       // * Uncaught TypeError: Cannot read property 'baseVal' of undefined
    //corrEl -> fails in FF but works in Ch, O and IE

Браузеры: FF10, Ch16, O11.61, IE9

Вопрос:

Почему getAttribute() не работает в других браузерах? Я что-то упустил? Существует ли согласованный способ получения значений кроссбраузер ? (Кроме того, через переключатель между evt.target.x и evt.target.correspondingUseElement.x)

важно: только vanilla js, и я знаю о переключателях браузера, это не главное! Я предоставлю скрипку, если нужно, как только найду время. Напоследок - спасибо, что прочитали это!

РЕДАКТИРОВАТЬ: * добавлены JS-ошибки

EDIT2: ** FF возвращает другой объект, чем другие браузеры

Ответы [ 4 ]

5 голосов
/ 18 февраля 2012

Ну, прочитав ответ Эрика Дальстрёма, я заметил, что FF ведет себя неправильно.Он должен возвращать Элемент-Экземпляр вместо Элемента Использования напрямую.

Сейчас я использую следующий код: 

var el = (evt.target.correspondingUseElement)?evt.target.correspondingUseElement:evt.target;

console.log(el.getAttribute("x"));

Таким образом, я могу последовательно получать атрибуты через getAttribute() ввсе браузеры.

1 голос
/ 15 февраля 2012

ты можешь попробовать это? evt.target.getAttributeNode("x").nodeValue. Я пробовал это в Safari, Chrome, Firefox работает нормально.

1 голос
/ 16 февраля 2012

Насколько я знаю, Firefox не поддерживает SVGElementInstance.

Вот пара тестов для SVGElementInstance из набора тестов w3c SVG 1.1 Second Edition для проверки:

Что вам нужно сделать, это предоставить запасное решение, если SVGElementInstance отсутствует, что достаточно просто обнаружить, например: 

if (elm.correspondingUseElement) {
  /* elm is a used instance, not a real element */
} else {
  /* fallback solution */
}

Если элемент являетсяSVGElementInstance будет иметь свойство correspondingUseElement, в противном случае его не будет.Обычные элементы svg не будут иметь этого свойства, только у используемых экземпляров.

0 голосов
/ 14 февраля 2012

Вы пробовали evt.target.getAttributeNS(evt.target.parent.namespaceURI,"x")?

...