Vasilis

Dearest SVG nerds, I’m trying to add an animated conic gradient to the background of this logo. I used a `foreignObject` for the gradient. It works fine in firefox and chrome, but as soon as I add a rotation or `position:absolute` to the `foreignObject` the `clipPath` disappears in safari.

Any ideas on how I could fix this? The image will be served as the source of an image tag. I tried adding a rotation or positioning to the `clipPath` as well, but alas …

https://vasilis.nl/dingen/echologo/gradient.svg

Dec 2 at 6:47amWeb
Show threadVasilisDec 2

I also made this one, using two `animateTransform`s that rotate in opposite directions. This one works fine in safari and chrome, but rotates the wrong thing in firefox.

I feel like a frontend developer in 2010.

https://vasilis.nl/dingen/echologo/gradient-2.svg

Show threadsmfrDec 2
@vasilis The transform thing is a known WebKit issue, alas. Try using a CSS variable for the gradient angle, and animating that via a keyframe animation.
Show threadVasilisDec 3
@smfr I think I need to use @property for this, right? But how does that work within an SVG? It tells me there’s an “opening and ending tag mismatch” on the line where it says `syntax: "<angle>";` Can I just use `syntax: "<angle/>";`? It doesn’t seem to work…
Show threadVasilisDec 3
@smfr Thank you very much! This, in combination with CDATA, fixed it.
Show threadKarl DubostDec 3
@vasilis Thanks. I have filed https://bugs.webkit.org/show_bug.cgi?id=303432 #webkit
303432 – foreignObject with clipPath and animation is not working properly

WebKit Bugzilla