0
votes

Impossible d'accéder à un élément en svg avec JS

J'essaie d'accéder à un élément dans un svg pour y ajouter un attribut d'effet vectoriel, mais je ne parviens pas à obtenir le premier élément.

J'ai essayé d'utiliser getElementsByTag ('path'), qui retourne undefined, j'ai également essayé d'accéder en tant que premier élément de la collection mais il retourne undefined

Voici à quoi ressemble le SVG, veuillez noter que j'ai supprimé de nombreux éléments et supprimé les valeurs d = "" pour le rendre plus lisible

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 ci-dessous, la racine est définie plus tôt dans le code et les deux premières affectations accèdent facilement à l'élément pertinent ci-dessus, car vous pouvez voir que l'effet vectoriel est ajouté à tous les éléments. Cependant, je dois aussi l'ajouter au premier «chemin», mais je n'arrive pas à y accéder. Notez également que j'ai changé les noms des variables, et s'il y a des fautes d'orthographe, veuillez les ignorer car cela fonctionne dans le code d'origine

<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">
<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 html svg

0 commentaires

3 Réponses :

1
votes

Ce qui suit vous donnera le premier élément de type path à partir des nœuds enfants de l'élément associé à id = "svgMain"

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

si vous voulez tous les nœuds que vous pouvez faire

document.querySelector("#svgMain path");

3 commentaires

merci, cela fonctionne bien dans ce cas. Cependant, il suffit de penser qu'il existe un moyen de le garder indépendant du nom car la structure du svg suivra ce qui précède, mais le premier chemin comme ci-dessus peut avoir une balise différente, telle que rect ou circle?

let shape = "circle"; document.querySelector( #svgMain $ {shape} );

@AlexVas vous pouvez simplement changer le mot "chemin" avec le type d'élément que vous recherchez document.querySelectorAll ("# svgMain rect");

0
votes

Listez simplement les éléments que vous souhaitez rechercher.

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

Cette requête renverra le premier élément qui correspond à l'un de ces éléments.

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

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

0 commentaires

0
votes

Vous pouvez obtenir n'importe quel élément qui est dans l'élément svg comme ceci:

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

puis itérez-le:

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

0 commentaires