I am trying to access an element in an svg to add vector-effect attribute to it, but am unable to get the first item.

I have tried using getElementsByTag('path'), which returns undefined, Ive also attempted to access as the first element of the collection but it returns undefined

This is what the SVG looks like, please note Ive removed many of the elements and taken out the d="" values to make it more readable

<svg xmlns="" id="svgMain" width="1203px" height="800px" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="54.5663 -109.9401 432.9000 287.8803"class="undefined">
<g id="all" transform="translate(0,236.9070) scale(1,-1) ">
    <g id="first_collection">
        <g id="0" class="outer closed 0">
            <path d="... "></path>

            <g id="1" class="inner closed 0"> 
                <path d="..." vector-effect="non-scaling-stroke" stroke-width="2px"></path>

            </g>
            <g id="2" class="inner closed 0"> 
                <path d="... " vector-effect="non-scaling-stroke" stroke-width="2px"></path>

            </g>
            <g id="3" class="inner closed 0"> 
                <circle cx="468.6413" cy="225.1570" r="1.0625" vector-effect="non-scaling-stroke" stroke-width="2px"></circle>
</svg>

Javascript below, the root is defined earlier in the code and first two assignments access the relevant element above easily as you can see the vector effect is being added to all the elements. However I need to add it to the first 'path' too, but can't seem to access it. Also note I've changed the variable names, and if there are any spelling mistakes please ignore as it works in the original code

var first_collection = root.getElementById('first_collection');
var children = all.children

function setStrokeScale(htmlCollection) {
    for (var i = 0; i < htmlCollection.length; i++) {
        var sub_children = htmlCollection[i].children;
        for (var i = 0; i < sub_children.length; i++) {
            var sub_sub_children = sub_children[i].children
            if (sub_sub_children.length > 0) {
                sub_sub_children[0].setAttribute("vector-effect", "non-scaling-stroke");
                sub_sub_children[0].setAttribute("stroke-width", "2px");
            }
        }
    }
}

I am trying to access an element in an svg to add vector-effect attribute to it, but am unable to get the first item.

I have tried using getElementsByTag('path'), which returns undefined, Ive also attempted to access as the first element of the collection but it returns undefined

This is what the SVG looks like, please note Ive removed many of the elements and taken out the d="" values to make it more readable

<svg xmlns="http://www.w3/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">
<g id="all" transform="translate(0,236.9070) scale(1,-1) ">
    <g id="first_collection">
        <g id="0" class="outer closed 0">
            <path d="... "></path>

            <g id="1" class="inner closed 0"> 
                <path d="..." vector-effect="non-scaling-stroke" stroke-width="2px"></path>

            </g>
            <g id="2" class="inner closed 0"> 
                <path d="... " vector-effect="non-scaling-stroke" stroke-width="2px"></path>

            </g>
            <g id="3" class="inner closed 0"> 
                <circle cx="468.6413" cy="225.1570" r="1.0625" vector-effect="non-scaling-stroke" stroke-width="2px"></circle>
</svg>

Javascript below, the root is defined earlier in the code and first two assignments access the relevant element above easily as you can see the vector effect is being added to all the elements. However I need to add it to the first 'path' too, but can't seem to access it. Also note I've changed the variable names, and if there are any spelling mistakes please ignore as it works in the original code

var first_collection = root.getElementById('first_collection');
var children = all.children

function setStrokeScale(htmlCollection) {
    for (var i = 0; i < htmlCollection.length; i++) {
        var sub_children = htmlCollection[i].children;
        for (var i = 0; i < sub_children.length; i++) {
            var sub_sub_children = sub_children[i].children
            if (sub_sub_children.length > 0) {
                sub_sub_children[0].setAttribute("vector-effect", "non-scaling-stroke");
                sub_sub_children[0].setAttribute("stroke-width", "2px");
            }
        }
    }
}

• javascript
• html
• svg

3 Answers 3

The following will give you first element of type path from child nodes of element associated with id="svgMain"

document.querySelector("#svgMain path");

if you want all the nodes you can do

var paths = document.querySelectorAll("#svgMain path");
paths[0]; //First node

Just list the elements you want to search for.

document.querySelector("path, rect, circle, ellipse, line, polyline, polygon");

This query will return the first element that matches any of those elements.

var elem = document.querySelector("path, rect, circle, ellipse, line, polyline, polygon");
alert("elem = " + elem);

<svg>
  <g>
    <g>
      <circle/>
    </g>
    <path/>
    <path/>
   </g>
</svg>

You can get any element which is in svg element like this:

let result = document.querySelectorAll(`svg,path,polygon,ellipse,stop`)

then iterate it:

for(let n=0; n<result.length; n++)
{
  if(result[n].tagName==="path")
   {
    console.log(result[n])
   }
}