svg element transition animation stuck when follow mouse move-CodePudding

Following is my code, I hope make tooltip follow mousemove like

CodePudding user response：

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.

CodePudding user response：

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}
                           onm ouseMove={(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>
                )