I’m trying to put a react component into a svg and I did it but the items (elements) of the component are overflowing out of the svg path boundries.

I’m working on an SVG gauge component that works perfectly in Chrome but has rendering issues in Safari and Firefox. The gauge displays progress using a gradient fill and a rotating pointer. In Chrome, everything renders correctly, but in Safari and Firefox, the gauge is styled incorrectly.