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 中的{1}}方法没有考虑到这一点（在 Firefox 中是），因此它将滚动到顶部，因为它认为该元素已存在，因为这就是SVG元素定位的工作方式。.元素都是从最左上角呈现的，然后通过scrollIntoView属性进行“转换”到其位置。

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

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

如何制作一个svg元素（例如矩形）scrollIntoView？

2 个答案: