0

我正在尝试访问 svg 中的元素以向其添加矢量效果属性，但无法获取第一项。

我尝试使用 getElementsByTag('path')，它返回未定义，我也尝试作为集合的第一个元素访问，但它返回未定义

这就是 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");
            }
        }
    }
}
4

3 回答 3

1

以下将为您提供与 id="svgMain" 关联的元素的子节点的类型路径的第一个元素

document.querySelector("#svgMain path");

如果你想要所有你可以做的节点

var paths = document.querySelectorAll("#svgMain path");
paths[0]; //First node
于 2019-10-18T05:39:10.540 回答
0

您可以像这样获取 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])
   }
}
于 2020-11-23T13:22:29.297 回答
0

只需列出您要搜索的元素。

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>

于 2019-10-18T12:12:58.543 回答