Question

我正在尝试访问svg中的元素以向其添加vector-effect属性，但是无法获取第一项。

我尝试使用getElementsByTag（'path'）返回未定义的状态，Ive也尝试将其作为集合的第一个元素进行访问，但返回的是未定义的

这就是SVG的外观，请注意，我已经删除了许多元素，并删除了d =“”值以使其更具可读性

<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，在代码的前面定义了根，并且前两个赋值可以轻松访问上面的相关元素，因为您可以看到矢量效果已添加到所有元素中。但是我也需要将其添加到第一个“路径”，但似乎无法访问它。另外请注意，我已经更改了变量名，如果有任何拼写错误，请忽略它，因为它可以在原始代码中使用

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");
            }
        }
    }
}

Answer 1

下面将为您提供与id =“ svgMain”相关联的元素的子节点中路径类型为第一个元素的

document.querySelector("#svgMain path");

如果您希望所有节点都可以做

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

Answer 2

只需列出要搜索的元素。

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

此查询将返回与任何这些元素匹配的第一个元素。

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

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

Answer 3

您可以像这样获得svg元素中的任何元素：

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

然后迭代它：

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

无法使用JS访问SVG中的元素

3 个答案: