4

我在图形面板中有一个 svg。svg 中的所有节点都列在另一个面板中。我希望通过单击节点列表中的节点，svg 可以滚动到该节点。每个节点都是一个矩形。但是我发现只有上边框在视野中，而节点的其余部分仍然在视野之外。有没有办法解决这个问题？（Javascript 或 Extjs）

这是我的代码：

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

2 回答 2

2

无论出于何种原因，scrollIntoView 似乎都不适用于 SVG 元素。这就是我所做的

假设 svg 在

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

            ...
            <path id> ...</path>
        </svg>
    </div>

然后假设在变量'element'中你有你想要scrollIntoView的元素

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

我不确定，但我观察到这getBBox很慢。所以保重。

于 2015-03-01T11:54:30.393 回答
1

问题是您尝试将视图滚动到的 SVG 元素可能有一个yordy属性，它从顶部偏移它，并且ChromescrollIntoView中的方法没有考虑到这一点（在Firefox中它会），因此它会滚动到顶部，因为它认为元素在那里，因为这就是 SVG 元素定位的工作原理。元素都从左上角渲染，然后通过属性“转换”到它们的位置。x, y, dx, dy

有一个开放的错误，您可以（并且应该）加注星标：

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

于 2018-06-24T08:29:41.743 回答