CSS Transitions optimization guide on SVG Elements in React 17.0.2
I've been banging my head against this for hours... I'm working with an scenario where CSS transitions do not seem to work on SVG elements in my React application. I'm trying to animate the `fill` color of an SVG rectangle on hover, but despite my styles being applied correctly, the transition isn't happening. Here's the relevant code snippet: ```jsx <svg width="100" height="100"> <rect x="10" y="10" width="80" height="80" className="my-rect" /> </svg> ``` And the accompanying CSS: ```css .my-rect { fill: blue; transition: fill 0.3s ease; } .my-rect:hover { fill: red; } ``` I've checked that the CSS file is correctly imported into my React component. Initially, I thought it might be a question with the `fill` property not being animatable in SVG, but the transition works fine if I apply it to a standard HTML element. When I inspect the SVG in the browser, I can see that the hover state is applied, but there’s just no transition effect. I’ve also tried adding `!important` to the fill properties, but that didn’t change anything. I’m using React version 17.0.2 and testing in Chrome 117. Any ideas on why the transition isn’t working with SVG elements? Am I missing something in my implementation? Any ideas what could be causing this? This issue appeared after updating to Javascript LTS.