zoomToElement appears to not function when selection Element inside of SVG

When passing the ID of a <polygon> element inside an SVG to the zoomToElement function as a string (or as the event.target object of a click event) no transformation occurs.

Browser: Chrome Version 91.0.4472.114 (Official Build) (x86_64)

package.json

...
"dependencies": {
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@types/react": "^17.0.11",
    "@types/react-dom": "^17.0.8",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-pdf": "^5.3.0",
    "react-scripts": "^4.0.3",
    "react-zoom-pan-pinch": "^2.1.1",
    "typescript": "^4.3.4",
}
...

My code:

import React from 'react';
import {ReactComponent as ActualSVG} from '../assets/someSVG.svg'
import {TransformWrapper, TransformComponent} from "react-zoom-pan-pinch";
import {Button} from "@material-ui/core";

function SVGComponent
return (
            <TransformWrapper initialScale={1}
                              limitToBounds={false}
                              centerOnInit={true}
                              minScale={0.5}
            >
                {({zoomToElement, resetTransform}) => (
                        <TransformComponent>
                            <Button onClick={()=>zoomToElement("Box_2")}/>
                            <div>
                                <ActualSVG />
                            </div>
                        </TransformComponent>
                )}
            </TransformWrapper>
    )
}

When clicking the <Button> I was expecting the wrapped SVG to zoom to the element with the id “Box_2” but no transformations occur. If I continue to click the <Button> every 3-4 times an error is logged in console saying “No mouse or touch offset found”.

Please let me know if there is anything more I can provide.

[Tylermarques]

@im-amir No solution at this time.

[ggomaeng]

I was trying to solve this issue too and found a workaround this issue, but it’s kinda hacky.

I created a separate div container that only holds divs, which are mapped to the x, y positions of each svg elements.

Not the best solution, but works!