SVG Fill Color Hover Transitions Not Animating

Question

I have transition animations on an SVG and everything is working fine except for the fill colors of .logo-square and .logo-bg. The color just changes without any pretty transitions. I definitely have it listed as a transitio, and it works in my pen.

Can someone lend a hand as to what I’m maybe missing?

Answer 1

Turns out the issue was how Safari renders and behaves with certain CSS properties in regards to SVG. I've since abandoned this way in favor of a easier image hover transition.