SVG+Javascript：如何使用类访问元素？

我正在处理一个SVG文件，我想计算有多少多边形有一个特定的类，比如说.red

下面是简单的javascript循环：

var polygons = document.getElementsByTagName("polygon");
var j = 0;
for (i = 0; i < polygons.length; i++) {
  if (polygons[i].className == "red") {
    j++;
  }
};

alert("There are " + j + " red shapes")

还有小提琴：

我不能得到预期的结果。 返回0而不是3。。。 不明白为什么。。。 我想一定有DOM问题或其他问题，但无法正确处理

我读过： 但我不想创建一个事件。最后，我想实现的就是使用document.write方法在页面中自动打印结果

---

谢谢你的帮助

您可以首先选择具有正确类的元素：

var polygons = document.querySelectorAll("polygon.red");
alert("There are " + polygons.length + " red shapes")

另一种选择是使用：

---

代码失败，因为className不返回字符串，而是返回一个，这显然不等于red。

SVG中的属性通常与HTML中相同命名属性的定义不同

属性类名称的类型不是字符串。所以你不能把它和一个字符串常量进行比较，比如红色。这行不通

SVG中属性类名称的类型为AnimatedString。AnimatedString有两个属性：

包含属性初始值的baseVal，以及 包含属性当前值的animVal。如果属性当前正在设置动画，则它可能与baseVal不同。 因此，要使代码正常工作，您需要将类测试更改为：

if (polygons[i].className.baseVal == "red") {

请参见下面的演示：

var polygons=document.getElementsByTagNamepolygon； var j=0； 对于i=0；i.长度；i++{ 如果多边形[i].className.baseVal==红色{ j++； } }; 警报有+j+红色形状 .形状{ 填充物：b9b9b9； 填充不透明度：1； 笔画：白色； 笔画不透明度：1； 笔划宽度：0.002； } 瑞德先生{ 填充：红色 }

---

调试101:添加console.logpolygons[i].className；我很难找到正确的方法，但是在我的记忆中，SVG内容被视为一个独立于HTML的文档。您需要查询SVG元素本身，以某种方式获取其文档，然后在其中进行查询。它类似于检查iframe.document的方式。querySelector“svg多边形”是访问内部svg元素的方式。在svg文档中查找多边形。您好，Sirko，非常感谢您的帮助！它在JSFIDLE中工作得很好，但我现在的问题是如何访问svg文件中的元素。我使用CMS，脚本与文件分开。必须有指令才能从SVG文件中获取元素。有什么想法吗？嗨，保罗，非常感谢你的解释。这让我更清楚了。然而，我现在面临一个新问题。。。知道SVG文件在DOM之外，如何访问SVG元素。我不确定我是否应该要求一个新的职位，因为这是一个不同的问题。。。考虑到这个问题已经被回答了很多次，所以。例如，请参见此问题：

if (polygons[i].className.baseVal == "red") {