javascript - Can't access an element in svg with JS - Stack Overflow

admin管理员组

文章数量:1416080

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

Share Improve this question Follow edited Oct 18, 2019 at 5:38 Simson 3,55922 gold badges2828 silver badges4646 bronze badges asked Oct 18, 2019 at 5:25 Person1Person1 14922 silver badges1212 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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])
   }
}

本文标签： javascriptCan39t access an element in svg with JSStack Overflow