Question

我有一个包含SVG对象和一些Javascript的页面。当我点击特定的G元素时，我想要更改该G元素中任何子元素的填充颜色 - 但只能更改与特定类匹配的元素。

SVG：

<g transform="translate(120, 40)" onclick="routeButton(this);">
  <ellipse cx="0" cy="0" rx="14" ry="14" fill="red" stroke-width="2" stroke="black" />
  <ellipse class="nxButtonFace" cx="0" cy="0" rx="11" ry="11" fill="darkslategray" stroke-width="1" stroke="black" />
  <polygon points="-1,-5 -6,0 -1,5" stroke="black" stroke-width="2" fill="black" />
  <polygon points="6,-5 1,0 6,5" stroke="black" stroke-width="2" fill="none" />
</g>

脚本：

    function routeButton(item) {
        for (var idx = 0; idx < item.childNodes.length; idx++) {
            var child = item.childNodes[idx];
            if (child.hasOwnProperty('classList') && child.classList.contains('nxButtonFace')) {
                child.setAttribute('fill', 'white');
            }
        }
    };

因此，在这种情况下，只应更改第二个椭圆。但是，在单击G元素时，没有任何事情发生，因为没有子节点似乎是classList作为属性的元素。删除hasOwnProperty检查会失败child.classList方法（null）。 FWIW，item.childNodes.length是9，而不是4。

我错过了什么？感谢。

Answer 1

没有元素拥有拥有属性Element。它们全部都来自children。

只需迭代childNodes而不是item.querySelectorAll(":scope > .nxButtonFace") .forEach((child) => child.setAttribute('fill', 'white'));。

只需使用

child.classList

如果浏览器支持不相关，那么函数体也可能就足够了。

如果这不起作用（例如due to compatibility reasons），请在child.hasOwnProperty('classList')条件中检查if而不是if (child.classList && child.classList.contains('nxButtonFace'))：

if (child.className && child.className.indexOf('nxButtonFace') > -1)

如果也不支持classList（例如，在Edge 16.16299之前不使用SVG），请使用填充或更改LinkedListDeque。

Answer 2

您是否考虑过只使用CSS？

function routeButton(item) {
  item.setAttribute("class", "selected");
};


.selected > .nxButtonFace {
  fill: white;
}

在JS中更改子SVG元素的属性

2 个答案: