chrvadala / react-svg-pan-zoom

:eyes: A React component that adds pan and zoom features to SVG
https://chrvadala.github.io/react-svg-pan-zoom/
MIT License
677 stars 125 forks source link

ReactSVGPanZoom onclick get svg polygon or rect name #182

Open TWifast opened 3 years ago

TWifast commented 3 years ago

HI. How can I use ReactSVGPanZoom onclick get the ID and NAME of SVG polygon rect.

vash15 commented 2 years ago

Hi, try this, it worked for me

<ReactSVGPanZoom
    ref={Viewer}
    onClick={(e) => {
        const point = e.point;
        const target = e.originalEvent.target;
        const id = target.id;
        const tagName = target.tagName;

        console.log("Click:", tagName, id );
        console.log("Point", point);

        Viewer.current.setPointOnViewerCenter(point.x, point.y, 10);

    }}
>
    <svg width={width || 0} height={height || 0} >
    {content}
    </svg>
</ReactSVGPanZoom>