How to get exact amount of stroke-dasharray on circle and rect?

Question

I am trying to figure out how an svg file works. I successfully found out the amount of stroke-dasharray of the path using JavaScript:

var path = document.querySelector(".aa")
path.getTotalLength();

When you checkout the svg file there are three elements. The first one is a path, the second one is a rect, and the last is a circle.

The console keeps showing error messages on the rect and circle. Is there any solution for this?

Here is my original code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="imacSVG" x="0" y="0" viewBox="0 0 1800 1200" xml:space="preserve" enable-background="new 0 0 1800 1200">
      <path d="M423.5 251.1c0 0 1.2-25.2 23.6-25.2 22.3 0 909.9 0.7 909.9 0.7s19.5-0.6 19.5 21.4 0 597 0 597 1.5 21.5-21.5 21.5 -909 0-909 0 -22.5-1.4-22.5-21.8C423.5 824.2 423.5 251.1 423.5 251.1z" class="aa"/>
      <rect x="466.6" y="271.6" width="865.5" height="540" class="bb"/>
      <circle cx="900.5" cy="246" r="8.2" class"cc"/>
</svg>

Answer 1

The getTotalLength() function is only available for <path> elements. You will need to find a different solution for the <rect> and <circle> .

Obviously, for the circle, you can use (2 * r * PI), and for the rect you can use (2 * (width + height)).