VasilisDec 2

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

Show threadsmfr
@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.
Dec 2 at 11:37pmWeb
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.