title: Can you get .length of number of svgs to create a rating score?
body: <p>Not sure if this is doable, but is there a way you can use .length or another method to get the rating score of something which is usually displayed in svg form?</p>
  <p>In the below HTML in each svg there's a &quot;g fill&quot; which determines what is outputted.</p>
  <ul>
  <li>&quot;var(--review-star-active)&quot; = 1 star</li>
  <li>&quot;url('#57_rating-half-star')&quot; = half star</li>
  <li>&quot;var(--review-star-inactive)&quot; = 0 star</li>
  </ul>
  <p>Is there a way to use .length here to determine what the rating is? This should be 3.5 stars in this case.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector(".productRating").insertAdjacentHTML("afterend", "Review is: " + document.querySelectorAll('.productStar').length);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="productRating"&gt;
    &lt;svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18"&gt;
      &lt;g fill="var(--review-star-active)"&gt;
      &lt;polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"&gt;&lt;/polygon&gt;
      &lt;/g&gt;&lt;/svg&gt;
    &lt;svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18"&gt;
    &lt;g fill="var(--review-star-active)"&gt;
      &lt;polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"&gt;&lt;/polygon&gt;
      &lt;/g&gt;&lt;/svg&gt;
    &lt;svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18"&gt;
    &lt;g fill="var(--review-star-active)"&gt;
      &lt;polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"&gt;&lt;/polygon&gt;
      &lt;/g&gt;&lt;/svg&gt;
    &lt;svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18"&gt;
    &lt;g fill="url('#57_rating-half-star')"&gt;
      &lt;polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"&gt;&lt;/polygon&gt;
      &lt;/g&gt;&lt;/svg&gt;
    &lt;svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18"&gt;
    &lt;g fill="var(--review-star-inactive)"&gt;
      &lt;polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"&gt;&lt;/polygon&gt;
      &lt;/g&gt;&lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>