How to make a svg element (e.g. rectangle) scrollIntoView?

Question

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. But I found that only the upper border is in view, while the rest part of the node are still out of the view. Is there any way to fix this problem? (either Javascript or Extjs)

This is my code:

function selectRectangle(Id){
  var ele = Ext.get(Id);
  ele.scrollIntoView(Ext.get('graph-panel-body'), true);}

Answer 1

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

suppose the svg is in a

    <div id="container">
        <svg ...>

            ...
            <path id> ...</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.

Answer 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