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

Question

我正在处理一个 SVG 文件，我想计算有多少个多边形具有特定的 class（比方说“.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")

和 fiddle ： https://jsfiddle.net/tuj0rmnx

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

我读过这个：How to access SVG elements with Javascript 但我不想创建一个事件。最后我想要实现的是 "print" 使用 document.write() 方法在页面中自动显示结果...

感谢任何帮助！！

Answer 1

您可以 select 具有正确 class 的元素放在第一位：

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不是return一个字符串，而是一个SVGAnimatedString，这显然不等于你的"red".

Answer 2

SVG 中的属性通常与 same-named 属性在 HTML 中的定义不同。

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

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

baseVal里面包含了属性的初始值，而
animVal里面包含了属性的当前值。如果属性当前正在设置动画，则它可能与 baseVal 不同。

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

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>

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

SVG + Javascript : how can I access elements using classes?

javascript

css

svg

polygon

getelementsbytagname

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

SVG + Javascript : how can I access elements using classes?

javascript

css

svg

polygon

getelementsbytagname

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