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="" xmlns: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>

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/2000/svg" xmlns:xlink="http://www.w3/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>

• javascript
• html
• svg

• I did a few functions for rect, circle, polygon, line and path here [link]stackoverflow./a/30376660/3189314 to get the length and after to use it on dasharrays – ZetCoby Commented May 22, 2015 at 10:50

1 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)).