svg element transition animation stuck when follow mouse move

Question

Following is my code, I hope make tooltip follow mousemove like echart(render select svg) tooltip

but the result transition become stuck, how to make transition smooth

            var it: SVGTextElement
            var c: SVGGElement
            ReactDOM.createRoot(document.querySelector("#root")).render(
                <svg>
                    <g ref={e => c = e}
                       onMouseMove={(ev: any) => {
                           var r = c.getBoundingClientRect()
                           var x = ev.clientX - r.x
                           var y = ev.clientY - r.y
                           it.setAttribute("transform", `translate(${x} ${y})`)
                       }}>
                        <rect x={0} y={0} width={300} height={300} fill={"transparent"} stroke={"black"}></rect>
                        <text ref={e => it = e} style={{transition: "all 0.5s ease"}}>tooltip</text>
                    </g>
                </svg>)

Answer 1

The mouse move handler should be attached to the SVG, not the tooltip. As it is now, if you move the mouse quickly enough to escape the tooltip, the event will no longer fire. And the tooltip will stop and appear to get stuck.

Answer 2

I find transition "ease" has a little stuck, use "linear" instead will make move smooth, following is my correct code

  var it: SVGTextElement
                var c: SVGGElement
                ReactDOM.createRoot(document.querySelector("#root")).render(
                    <svg width={1000} height={500}>
                        <g ref={e => c = e}
                           onMouseMove={(ev: any) => {
                               var r = c.getBoundingClientRect()
                               var x = ev.clientX - r.x
                               var y = ev.clientY - r.y
                               it.setAttribute("transform", `translate(${x} ${y})`)
                           }}>
                            <rect x={0} y={0} width={1000} height={500} fill={"transparent"} stroke={"black"}></rect>
                            <text ref={e => it = e} style={{transition: "all 0.5s linear"}}>tooltip</text>
                        </g>
                    </svg>
                )