I'm trying to update cursor style on a <svg> tag, without triggering the style recalculation. My current code is

React TS

 <div className ="fixed ...">
            <svg
                style={{cursor: isDragging ? 'grabbing' : 'default'}}
                ref={svgRef}
                onWheel={handleWheel}
                onMouseDown={handleMouseDown}
                onMouseUp={handleMouseUp}
                onMouseMove={handleMouseMove}
                onMouseLeave={handleMouseLeave}
            >
</div>

The problem with directly updating the cursor via the SVG or its parent div is that it triggers a recalculation of the entire styles. This takes about 80ms and impacts more than 22k elements.

This is because my SVG represents an interactive map with many elements.

I have so far come up with one idea on how to do it, but I haven't been technically successful.

Try to put a sibling div with the cursor:

React TS

 <div className="fixed ..."
             onWheel={handleWheel}
             onMouseDown={handleMouseDown}
             onMouseUp={handleMouseUp}
             onMouseMove={handleMouseMove}
             onMouseLeave={handleMouseLeave}
             ref={hitboxRef}
        >
            <div className="absolute size-full bg-transparent"
                 style={{cursor: isDragging ? 'grabbing' : 'default'}}
            />
            <svg
                ref={svgRef}
            >
</div>

It works for the cursor (no more painfull calculation), but the div catch all click events. It is now impossible to click on svg children. I look for disable point event and still keep the cursor style but i don't find a way to do it with a div.

I found a post which shows a way to do it with <a> tag here

I'm trying to update cursor style on a <svg> tag, without triggering the style recalculation. My current code is

React TS

 <div className ="fixed ...">
            <svg
                style={{cursor: isDragging ? 'grabbing' : 'default'}}
                ref={svgRef}
                onWheel={handleWheel}
                onMouseDown={handleMouseDown}
                onMouseUp={handleMouseUp}
                onMouseMove={handleMouseMove}
                onMouseLeave={handleMouseLeave}
            >
</div>

The problem with directly updating the cursor via the SVG or its parent div is that it triggers a recalculation of the entire styles. This takes about 80ms and impacts more than 22k elements.

This is because my SVG represents an interactive map with many elements.

I have so far come up with one idea on how to do it, but I haven't been technically successful.

Try to put a sibling div with the cursor:

React TS

 <div className="fixed ..."
             onWheel={handleWheel}
             onMouseDown={handleMouseDown}
             onMouseUp={handleMouseUp}
             onMouseMove={handleMouseMove}
             onMouseLeave={handleMouseLeave}
             ref={hitboxRef}
        >
            <div className="absolute size-full bg-transparent"
                 style={{cursor: isDragging ? 'grabbing' : 'default'}}
            />
            <svg
                ref={svgRef}
            >
</div>

It works for the cursor (no more painfull calculation), but the div catch all click events. It is now impossible to click on svg children. I look for disable point event and still keep the cursor style but i don't find a way to do it with a div.

I found a post which shows a way to do it with <a> tag here

• html
• css
• reactjs
• optimization

3 Answers 3

You are on the way to solve the problem, just need to do a few changes.

React refs can take a function that returns the its elements as a callback, with this you can pass a useCallback function with isDragging as parameter and update the element style of the ref itself.

const svgRef = useCallback((svgEl: SVGSVGElement | null) => {
   if(svgEl) {
    svgEl.style.cursor = isDragging ? 'grabbing' : 'default';
   }
}, [isDragging]);

return <svg
         ref={svgRef}
       >

return (
    <div className="..."
         onWheel={handleWheel}
         onMouseDown={handleMouseDown}
         onMouseUp={handleMouseUp}
         onMouseMove={handleMouseMove}
         onMouseLeave={handleMouseLeave}
         ref={hitboxRef}
    >
        <div className="absolute size-full bg-transparent"
             style={{cursor: isDragging ? 'grabbing' : 'default', pointerEvents: 'none'}}
        />
        <svg
            ....
        >
        </svg>
    </div>
);

The div has pointer-events: none;, meaning it will not intercept mouse events such as clicks or hover actions. This ensures that interactions can still happen on the SVG.

The cursor style (grabbing or default) will be applied to the div, which doesn’t trigger a full style recalculation for the entire SVG.

The absolute size-full bg-transparent ensures that the div covers the entire area of the SVG, allowing the cursor style to update without interfering with user interaction.

I solved my problem by changing my goals. I was focused to update cursor but instead i just update the pointerEvents dynamically according to the isDragging value.

When i am not dragging, the sibling div which hold the cursor has pointerEvents="none"

When isDragging switch to True, the pointerEvent update to "all" and the sibling cursor override the svg cursor.

return (
    <div className="..."
             onWheel={handleWheel}
             onMouseDown={handleMouseDown}
             onMouseUp={handleMouseUp}
             onMouseMove={handleMouseMove}
             onMouseLeave={handleMouseLeave}
             ref={hitBoxRef}
        >
            <div
                className="absol size-full bg-transparent-cursor grabbing"
                style={{pointerEvents: isDragging ? 'all' : 'none'}}
            />
            <svg
            ...
        >
)