alexjlockwood / ShapeShifter

SVG icon animation tool for Android, iOS, and the web
https://shapeshifter.design
Apache License 2.0
3.95k stars 201 forks source link

Add a warning or change behaviour for clip-paths not being the first item when exporting to AVD #351

Open KieronQuinn opened 2 years ago

KieronQuinn commented 2 years ago

Currently Shape Shifter (beta) allows you to export an AVD with a clip-path as any child of a group or the root vector. AVD doesn't seem to support this, the clip-path must be the first item of the child or it will not work. It's not documented anywhere, but I hit the issue when working on an animation, and was pointed to the solution by this stack overflow post.

Example: image

Renders fine in Shape Shifter, but the mask will not be rendered in AVD

image

Renders fine in both Shape Shifter and AVD

Interestingly, Shape Shifter stable seems to handle the issue better, but still not perfectly. If the mask is placed last, the render looks like this:

image

Placed first, it looks like this:

image

The render for it being placed first is incorrect, but hitting play and then restarting the animation will make it render correctly:

image

Here is the .shapeshifter animation I was using for the above, though it should work with any vector with a clip-path: vector (12).zip