I am trying to animate an Svg path so that it looks like it’s drawing it self on the screen when loaded,
My problem at this point is that I need to somehow figure out the total length of the svg path item at run-time and I can’t find a way to actually track the path and query for it’s length.
In Javascript for example you could do something like the following
var path = document.querySelector (.someclass path)
path.getTotalLength();
Anybody found himself in similar situation ? if so how did you dealt with it ?
In elm the view is always a consequence of the Model. This means that getting data from the view cannot be done as you would in JavaScript. For some situations like this the official elm packages provide some functionality, because those are the only packages that actually execute JavaScript. This has been decided in order to keep the language stable and thinking on a future where Elm could be compiled into WebAssembly or used in other contexts rather than web browsers. Having said this, of course you can do javascript interop with elm. You have two options: ports or web components. I use both depending on the situation. In general, I use web components to wrap stuff that needs a dom or that holds a state, because then I can always check the state using the browser inspector, and ports when I just need to have JavaScript do a specific reason, for a veriety of reasons. In your case I think I would go for the web component, and have it trigger an event with the path length whenever the path changes.
Thanks for you response and proposals @francescortiz although I was just wandering whether there is a native elm work around instead of ports. I think your answer kind of drove the NO answer to next level.
Something else you could try is extending the path element with a read-only property using proxies or something. It will not be worth the effort though.
Just setting a high enough number for stroke-dasharray.
If you really want to know path length, and you look for a pure elm solution, then take a look at ianmackenzie/elm-geometry. It provides functions for getting the lengths of paths. Also see the package ianmackenzie/elm-geometry-svg!
Thanks for your response, When animating a path I would like to control the time it needs to be drawn so that I can potentially combine it with another animation at the same or a different shape so in this case giving a big enough value can’t do the job I think, unless of course I missing a point here. My solution after reading all the answers is to probably calculate the length at the back-end using some command line tool like inkscape’s cli.
