Enable pathLength animations for more SVG shapes

[mattgperry]

Instead of measuring path length with getTotalLength, we now set the pathLength attribute to 1.

This change:

• Fixes path animations for elements with vector-effect="non-scaling-stroke" applied
• Extends path animations from path to circle, ellipse, line, polygon, polyline and rect components
• Adds SSR support for pathLength

Fixes #521

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 54ae9a4:

Sandbox	Source
Framer Motion: Simple animation	Configuration
App Store UI using React and Framer Motion	Configuration
Framer Motion: Reorder animation	Configuration
Framer Motion: growing item positionTransition issue	Configuration
Framer Motion: Image lightbox	Configuration
nervous-zeh-bk1vs	Issue #521

[willhindson]

I'm not sure this is the best way to get my issue fixed, but I think that a problem I am having aligns mostly to this previously flagged issue.

I'm using framer-motion to animate a simple path with a start point, end point and two control points from 0 to 1 in length.

The animation works smoothly and correctly but when I add vectorEffect="non-scaling-stroke" on motion.path (which is necessary for this stretched svg) you can clearly see the strokeDasharray — the line only gets half filled. As though the pathLength is not being correctly calculated

It seems from this issue that it should have been solved long ago, but maybe something was broken recently?

[willhindson]

I am wondering if the issue is related to the fact that the path animates from stroke-dasharray="0px 1px" to stroke-dasharray="1px 1px"

I am using initial={{ pathLength: 0 }} and whileInView={{ pathLength: 1 }}