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

Question

我正在处理一个 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")

和小提琴： https://jsfiddle.net/tuj0rmnx

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

我已阅读：How to access SVG elements with Javascript 但我不想创建一个事件。最后我想要实现的就是使用 document.write() 方法在页面中自动“打印”结果......

任何帮助表示赞赏！

Answer 1

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

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

Updated Fiddle

---

另一种方法是使用classList：

var polygons = document.getElementsByTagName("polygon");
var j = 0;
for (i = 0; i < polygons.length; i++) {
console.log( polygons[i].className );
  if (polygons[i].classList.contains( "red" ) )  {
    j++;
  }
};
alert("There are " + j + " red shapes")

Another Fiddle

---

你的代码失败了，因为className 没有返回一个字符串，而是一个SVGAnimatedString，这显然不等于你的"red"。

Answer 2

SVG 中的属性通常与 HTML 中的同名属性具有不同的定义。

属性className 的类型不是字符串。所以你不能将它与像"red" 这样的字符串常量进行比较。它不会工作。

SVG 中属性className 的类型是AnimatedString。 AnimatedString 有两个属性：

• baseVal 包含属性的初始值，并且
• animVal 包含属性的当前值。如果当前正在为属性设置动画，则它可能与 baseVal 不同。

因此，要使您的代码正常工作，您需要将类测试更改为：

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

请看下面的演示：

var polygons = document.getElementsByTagName("polygon");

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

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

.shapes {
  fill: #b9b9b9;
  fill-opacity: 1;
  stroke: white;
  stroke-opacity: 1;
  stroke-width: 0.002;
}

.red {
  fill: red
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="433" height="378" preserveAspectRatio="none" version="1.1" x="0" y="0">

  <g class="shapes">

    <polygon points="35.582,121.756 0.578,61.128 35.582,0.5 105.588,0.5 
	140.592,61.128 105.588,121.756 " />
    <polygon points="181.334,121.756 146.331,61.128 181.334,0.5 251.341,0.5 
	286.345,61.128 251.341,121.756 " />
    <polygon class="red" points="327.087,121.756 292.083,61.128 327.087,0.5 397.094,0.5 
	432.098,61.128 397.094,121.756 " />
    <polygon points="35.582,377.071 0.578,316.443 35.582,255.815 
	105.588,255.815 140.592,316.443 105.588,377.071 " />
    <polygon class="red" points="181.334,377.071 146.331,316.443 181.334,255.815 
	251.341,255.815 286.345,316.443 251.341,377.071 " />
    <polygon points="327.087,377.071 292.083,316.443 327.087,255.815 
	397.094,255.815 432.098,316.443 397.094,377.071 " />
    <polygon points="111.328,249.413 76.324,188.785 111.328,128.157 
	181.334,128.157 216.338,188.785 181.334,249.413 " />
    <polygon class="red" points="257.081,249.413 222.077,188.785 257.081,128.157 
	327.087,128.157 362.091,188.785 327.087,249.413 " />
  </g>
</svg>