0

I need to have a full screen SVG path that I draw in, but it needs to be percentage based for all devices, however when I measure the path length in JS it's just returning 400 due to the path definition being as follows:

<path id="path" d="M 0,0 0,100 100,100 100,0 0,0"></path>

I need to measure the total length of the path so I can use dash-array and dash-offset to draw it in in one smooth transition.

Here's a codepen with an example mocked up: https://codepen.io/jaybox325/pen/vjBgMe?editors=1111

Is it even possible to measure this because it's doesn't technically have an absolute length.

I have got a fallback version made using pseudo elements, but I'd like to use an SVG if possible!

Thanks!

Jay
  • 326
  • 2
  • 18
  • 1
    Explain what you want the path to look like rather than your problems with lengths. I suspect this is an X Y problem. – Robert Longson Apr 17 '18 at 10:45
  • 1
    I suspect you just want a viewBox and then you can use absolute paths. – Robert Longson Apr 17 '18 at 10:53
  • Thanks @raul.vila! I struggled for the terminology to search with and hadn't come across the getBoundingClientRect function before. – Jay Apr 17 '18 at 11:10
  • 1
    You're welcome. Don't worry, marking as duplicate has the intention to provide and answer and link your question with that answer for future users which may find your question instead of the original. – raul.vila Apr 17 '18 at 11:31

1 Answers1

0

Thanks to raul.vila in the comments, I managed to use the getBoundingClientRect() function to get the width and height of the rectangle and use these lengths to animate the path perfectly.

More details here: Get dimension of a path in SVG

Jay
  • 326
  • 2
  • 18