The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Animated Clipping In SVG Reply To: Animated Clipping In SVG


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*="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 …