How To Make A Svg Element (e.g. Rectangle) Scrollintoview?

I have a svg in graph panel. All nodes in the svg are listed in another panel. I hope that by clicking the node in node list, svg can scroll to that node. Each node is a rectangle.

Solution 1:

By whatever reason scrollIntoView seems not to work for SVG elements. This is what I do

suppose the svg is in a

<divid="container"><svg...>

            ...
            <pathid> ...</path></svg></div>

then suppose in the variable 'element' you have the element you want to scrollIntoView

var bbox = ele.getBBox()
        var top = bbox.y + bbox.y2
        top = 50 * Math.floor(top/50)
        $("#container").get(0).scrollTop=top

I am not sure, but I observe that getBBox is pretty slow. So take care.

Solution 2:

The problem is that the SVG element you are trying to scroll the view to probably has a y or dy attribute which offsets it from the top, and the scrollIntoView method in Chrome doesn't take that into account (in Firefox it does), therefor it will scroll to the top, because it thinks the element is there, because this is how SVG elements positioning works.. elements are all rendered from the very top left and then kind of "transformed" to their positions via x, y, dx, dy attributes.

There is an open bug which you can (and should) star:

https://bugs.chromium.org/p/chromium/issues/detail?id=803440