feat: support SVGPath

[imfenghuang]

🔗 Linked issue

#241

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSDoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

SVGPath related properties are not processed originally

1. MotionProperties is defined includes SVGPathProperties, but does not process
2. style supports process pathLength, pathSpacing, pathOffset
3. pathLength always normalize to 1
4. pathLength and pathSpacing to stroke-dasharray. stroke-dasharray = pathLength pathSpacing
   4.1 stroke-dasharray = pathLength pathSpacing. this support process dashes and gaps are two or same size, can't process that dashes and gaps of various sizes with an odd number of values, like 4,1,2 which is equivalent to [4,1,2,4,1,2]
5. pathOffset to stroke-dashoffset
6. tests and demo added

📝 Checklist

• I have linked an issue or discussion.
• I have added tests (if possible).
• I have updated the documentation accordingly.

[imfenghuang]

hi @BobbieGoede can you pre-review this, and give me some advice?

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/@vueuse/motion@243

commit: e8199eb

[BobbieGoede]

Sorry again for the delays in reviewing this PR is a bit more involved and I'm contributing on several projects at the same time😅

My initial thoughts:

1. I see some opportunities for perf improvements such as caching/saving the result of isSVGElement rather than checking multiple times in the same block.
2. This handles 3 SVG path attributes, is there a (complete) list of SVG properties we would ideally have support for?
3. The handling of the SVG attributes seems to be quite specific, from what I recall the style attributes we currently support are handled in a more generalized manner, is there a reason why SVG attributes cannot be handled in the same way as normal attributes?

Please let me know if more clarification is needed 🙏 Contributions are always appreciated, just making sure we preserve maintainability when adding more functionality 💪

[imfenghuang]

thanks a lot 🙏
i think i was wrong 😅

i saw the code SVGPathProperties so i tried to use pathOffset pathSpacing to control the svg animation like Framer, and it didn't work, but i forgot to use strokeDasharray strokeDashoffset 😅

now i use strokeDasharray strokeDashoffset, it work well.

export interface SVGPathProperties {
  pathLength?: number
  pathOffset?: number
  pathSpacing?: number
}

but like pathLength it still not support