получить атрибуты дочерних элементов SVG из разметки

Question

Я хочу программно определить атрибуты SVG. Это все встроенный контент, что-то вроде этого:

<svg> 
<path d="###########"> 
    <animate from="5" to="0" begin="3s" dur="1s" etc etc> 
</path> 
</svg> 

Звучит легко, пыль, справа? Но я ударяю о стену. Я прочитал this, но для начала:

document.getElementsByTagName('path'); 

, кажется, не работает в IE, который является основным местом неприятности. Он всегда возвращает undefined.

(Я знаю, что IE only supports scripted animation, это все повод для этого.)

В любом случае, «получить» часть работает в Chrome, но при этом Nodelist регистрируется в Dev Tools консоль возвращает бесполезную

[object Nodelist] 

и когда я вхожу отдельные пути я получаю подобное:

[object Text] 

который слишком похож на IE, а не обычный подробный Javascript объект, что затрудняет определение того, что происходит под капотом. И, наконец, когда я пытаюсь получить заявленные атрибуты анимации:

.getAttributeNS(null, 'dur') 

, кажется, не работает, либо, даже в Chrome. Dev Tools говорит, что текст объекта пути не имеет метода getAttributeNS. То же самое для простого старого getAttribute. Я также попробовал «.contentDocument» в файле SVG, но это тоже не работает. В принципе, у меня нет проблем на всех заходящего этих значений в любом браузере а-ля:

animation.setAttributeNS(null,'begin',startTimeRounded + 's'); 

Я просто не могу показаться, чтобы получить слипались. Любое руководство высоко ценится.

P.S. Селекторы jQuery не работают с элементами SVG, и, кроме того, я бы предпочел не загружать библиотеку, чтобы решить эту небольшую проблему.

P.P.S. Я повторяю огромное количество путей, поэтому ответы, предлагающие установку уникальных идентификаторов для каждого элемента, в этом случае не помогают. Я хочу получить элементы по имени. Кросс-браузер лучше, но он должен работать в IE ...

Answer 1

Элементы getElementsByTagName и SVG getAttribute, похоже, отлично работают с IE. Перхарпы вы пытаетесь получить атрибут «dur» из элемента пути, а не из анимированного элемента? Или иначе, из текстового узла элемента «путь»?

SVG довольно строг относительно текстовых узлов. Например, если ваш путь определяется так:

<path d="M 0 0 L 10 5 L 0 10 z" > 
    <animate from="5" to="0" begin="3s" dur="1s"> 
</path> 

Он будет считать, что первый потомок элемента «путь» является текстовым узлом, а второй является «живой» вы хотите.Таким образом, следующий код должен работать

var paths = document.getElementsByTagName('path'); 
alert(paths[0].childNodes[1].getAttribute("dur")); //first path, second node ('animate'), the dur attribute 

Однако, если определить все без какого-либо пространства между «путем» и «элемент»:

<path d="M 0 0 L 10 5 L 0 10 z" ><animate from="5" to="0" begin="3s" dur="1s"></path> 

Тогда одушевленным будет первым ребенком «путь 'и следующий код будет работать нормально:

var paths = document.getElementsByTagName('path'); 
alert(paths[0].childNodes[0].getAttribute("dur")); //now we can get the first child, as expected 

PS: это „одушевленный“ не будет делать ничего, так как она является неполной