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

Question

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

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

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

document.getElementsByTagName('path');

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

(я знаю, что IE поддерживает только скриптовую анимацию , вот и весь повод для этого.)

В любом случае, часть get работаетв 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');

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

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

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

Answer 1

Элементы getElementsByTagName и getGttribute SVG, похоже, отлично работают с IE.Возможно, вы пытаетесь получить атрибут 'dur' из элемента path вместо элемента animate?Или из текстового узла элемента 'path'?

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

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

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

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

Однако, если вы определите все без пробела между 'path' и 'element':

<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: эта «анимация» ничего не сделает, так как она неполна