JavaScript не может получить доступ к элементу в SVG с помощью JS

Не удается получить доступ к элементу в SVG с помощью JS

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

Я пытался использовать getElementsByTag (‘путь’), который возвращает неопределенный, я также пытался получить доступ в качестве первого элемента коллекции, но он возвращает неопределенный

Вот как выглядит SVG, обратите внимание, что я удалил многие элементы и извлек значения d = «», чтобы сделать его более читабельным.

 {amp}lt;svg xmlns="http://www.w3.org/2000/svg" id="svgMain" width="1203px" height="800px" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="54.5663 -109.9401 432.9000 287.8803"class="undefined"{amp}gt; {amp}lt;g id="all" transform="translate(0,236.9070) scale(1,-1) "{amp}gt; {amp}lt;g id="first_collection"{amp}gt; {amp}lt;g id="0" class="outer closed 0"{amp}gt; {amp}lt;path d="... "{amp}gt;{amp}lt;/path{amp}gt; {amp}lt;g id="1" class="inner closed 0"{amp}gt; {amp}lt;path d="..." vector-effect="non-scaling-stroke" stroke-width="2px"{amp}gt;{amp}lt;/path{amp}gt; {amp}lt;/g{amp}gt; {amp}lt;g id="2" class="inner closed 0"{amp}gt; {amp}lt;path d="... " vector-effect="non-scaling-stroke" stroke-width="2px"{amp}gt;{amp}lt;/path{amp}gt; {amp}lt;/g{amp}gt; {amp}lt;g id="3" class="inner closed 0"{amp}gt; {amp}lt;circle cx="468.6413" cy="225.1570" r="1.0625" vector-effect="non-scaling-stroke" stroke-width="2px"{amp}gt;{amp}lt;/circle{amp}gt; {amp}lt;/svg{amp}gt; 

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

 var first_collection = root.getElementById('first_collection'); var children = all.children function setStrokeScale(htmlCollection) { for (var i = 0; i {amp}lt; htmlCollection.length; i  ) { var sub_children = htmlCollection[i].children; for (var i = 0; i {amp}lt; sub_children.length; i  ) { var sub_sub_children = sub_children[i].children if (sub_sub_children.length {amp}gt; 0) { sub_sub_children[0].setAttribute("vector-effect", "non-scaling-stroke"); sub_sub_children[0].setAttribute("stroke-width", "2px"); } } } } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector