title: SVG + Javascript : how can I access elements using classes?
body: <p>I'm working on a SVG file, and I'd like to count how many polygons have a certain class (lets say ".red")</p>
  
  <p>Here's the simple javascript loop:</p>
  
  <pre><code>var polygons = document.getElementsByTagName("polygon");
  var j = 0;
  for (i = 0; i &lt; polygons.length; i++) {
    if (polygons[i].className == "red") {
      j++;
    }
  };
  
  alert("There are " + j + " red shapes")
  </code></pre>
  
  <p>and the fiddle :
  <a href="https://jsfiddle.net/tuj0rmnx" rel="nofollow noreferrer">https://jsfiddle.net/tuj0rmnx</a></p>
  
  <p>I can't get the expected result. 
  0 is returned instead of 3...
  Can't figure out why...
  I guess there must be a DOM issue or someting, but can't get it right...</p>
  
  <p>I have read this : <a href="https://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript">How to access SVG elements with Javascript</a>
  but I don't want to create an event. All I want to achieve at the end, is to "print" the result automatically in the page using document.write() method...</p>
  
  <p>Any help appreciated!!</p>