jQuery .css() not applying styles to SVG elements in certain browsers
I'm following best practices but I'm having an scenario where I'm trying to dynamically change the fill color of an SVG element using jQuery's `.css()` method, but it only works in Chrome and Firefox. In Safari, the styles are not being applied correctly, and I need to seem to figure out why. Here's a snippet of my code: ```javascript $(document).ready(function() { $('#mySVGPath').css('fill', 'red'); }); ``` The `#mySVGPath` is a path element inside an SVG file that is embedded directly in the HTML. When I inspect the element in Safari, the style is still set to its original value, even though jQuery runs without errors. I have also tried to apply the styles using plain JavaScript, like this: ```javascript document.getElementById('mySVGPath').style.fill = 'red'; ``` That didn't work either. I've checked that the SVG is correctly loaded and accessible in the DOM. It seems like there might be some quirk with how Safari handles CSS properties for SVG elements. Has anyone encountered a similar scenario or has a workaround for applying styles to SVG elements in all browsers? Iām using jQuery version 3.6.0 and testing on macOS with Safari version 14.1.1. This issue appeared after updating to Javascript stable. Is there a simpler solution I'm overlooking?