Reply To: Animated Clipping In SVG

[Atelierbram]

Congrats, that is a clever way of scoping those clipPaths to the right elements; kudos for that javaScript!

The scoping of those clipPath was really complicating and frustrating things a lot, I can see this now, but underestimated this initially.

An alternative approach could be having inline style-blocks targeting those clipPaths with unique ID’s. In the CSS one could then target those with attribute selectors (, when you would name them like #leftClip-1 #leftClip-2 and so on):

clipPath[id*="leftClip"],
clipPath[id*="rightClip"] {
    transform-origin: center right;
} 

Admittedly more typing, but those style-blocks are still quite small.

BTW Firefox seems to have a problem with rotating those clipPaths …