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

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