CSS Transitions optimization guide on Hover for SVG Elements in Chrome
I've been struggling with this for a few days now and could really use some help. I'm trying to create a hover effect on SVG elements using CSS transitions, but they are not working as expected in Chrome. I've defined my SVG elements in a way that they should change color smoothly when hovered over, but instead, they just jump to the new color without any transition. Here's the relevant CSS code I’m using: ```css svg { width: 100px; height: 100px; transition: fill 0.5s ease; } svg:hover { fill: #ff0000; } ``` And here’s the SVG markup: ```html <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="#00ff00" /> </svg> ``` I’ve also tried adding the `fill` property directly to the `circle` element, but it still jumps to red on hover. This scenario seems to be specific to Chrome because it works perfectly in Firefox. I've made sure that my Chrome is up-to-date (version 116.0.5845.96). Is there something specific I need to do for the transitions to work with SVG elements in Chrome, or is there a known bug that I might be working with? For context: I'm using Css on Windows. Any ideas what could be causing this?