如何使SVG元素（例如矩形）scrollIntoView？

Question

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

这是我的代码：

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

Answer 1

无论出于何种原因，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相当慢。 所以保重

Answer 2

问题在于，您试图将视图滚动到SVG元素可能具有y或dy属性，该属性将其从顶部偏移，并且Chrome中的scrollIntoView方法没有考虑到这一点（在Firefox中确实如此），因此它将滚动到顶部，因为它认为元素在那，因为这是SVG元素定位的工作方式。.元素都是从最左上角呈现的，然后通过x, y, dx, dy进行“转换”到其位置x, y, dx, dy属性。

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

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