PDA

View Full Version : How to make a svg element (e.g. rectangle) scrollIntoView?



baoyouyu
9 May 2013, 3:17 PM
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 below the view. Is there anyway to fix this problem?



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


This is the picture of my problelm. BB_116 is at right bottom. You can see a slice of blue line. That's is the rectangle that I want to scroll into view.

Thanks.

43686

slemmon
14 May 2013, 1:30 PM
It's been a while since I worked much with Sprites, but if memory serves the issue you may run into is calculating a sprite's dimensions. Its element is not the same as a standard div and when fiddling with finding the dimensions you might even find browser A operates a little differently than browser B.

You can do a scrollIntoView immediately followed by a scrollTo (left) and a scrollTo (top). The issue you may run into is what to pass as the second param for scrollTo. If you make a rect sprite of height: 50 you likely can't just scrollTo('top', 50).