V
V
VANY2015-07-24 22:41:07
JavaScript
VANY, 2015-07-24 22:41:07

How to calculate for all path their length?

Hello.
Available:

<svg id="svg-image">
<path/>
<rect/>
<path/>
</svg>

How to calculate the length of all paths that are included in #svg-image using jquery?
Actually, I can not understand how to correctly add the code below.
svg = $("#svg-image");
path = document.querySelector('path');
var pathLen = path.getTotalLength();
path.setAttribute('stroke-dasharray', pathLen);

===
updated the code, the length is calculated, the attribute is assigned. But only for the first encountered path. How to do this for all paths in the document? In general, it is desirable that you look not at the document, but only at svg elements.
===
ready solution for handling all paths in all svg. Without animation, it will just add the length of the path to the attributes.
var nS = 'http://www.w3.org/2000/svg';
var svgPaths = document.getElementsByTagNameNS(nS,'path');

for (var x = 0; x < svgPaths.length; x++) {
  var path = svgPaths[x];
  var pathDimensions = path.getTotalLength();
  path.style.strokeDasharray = pathDimensions;
  path.style.strokeDashoffset = pathDimensions;
};

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Azim Kurt, 2015-07-24
@vanyproduction

Why not cycle through all the paths and assign each one individually?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question