svg元素-滚动至/居中

我在页面上动态创建了一个svg。当事情发生时，用户单击svg会展开和折叠某些元素。它可能适合视口，也可能不适合。如果页面太大，无法放在页面上，用户必须滚动到她想去/看的地方。现在这很好，但是我有一个要求，最后选择的元素成为页面/视口的中心。i、 如果他们点击一个项目，那就是他们不需要滚动就能看到的

有谁能告诉我攻击这个的最好方法吗。我在谷歌上搜索了一下，但找不到我要找的东西，虽然我的搜索时间不长，所以我可能搜索错了东西

有没有一种方法可以完全通过javascript编程实现这一点？或者我必须通过CSS才能得到我想要的解决方案。非常感谢任何提示/链接/建议

谢谢，祝你今天愉快

---

G

我有一个类似的问题，我使用viewBox属性来处理这个问题。您还可以使用一个换行元素，并对其进行翻译。然而，在我看来，基本方法是一样的，你基本上需要做两件事：

跟踪视口的x和y偏移以及尺寸。使用viewBox将为您提供»免费« 计算元素的中心。因此，我使用了GetBoundingClientRect方法，该方法在绝对坐标空间中生成元素的AABB，相对于整个页面的左上角。 有了这些东西，剩下的就是计算从视口中心到对象中心的向量

您可以找到viewBox的参考和一个很好的教程，因为它在开始时可能有点混乱

“viewBox”方法的另一个优点是：不依赖于特殊的DOM元素，它只适用于根元素。一旦实现了这两种方法，我就开始使用包装元素，虽然效果很好，但给了我一些性能问题。所以我决定改变并使用viewBox，结果是Firefox的性能有所提高，但Chromium的性能有所下降

编辑

---

提琴，这概括了方法。但是要注意以下几点：getBoundingClientRect会生成元素在整个页面上的位置，因此如果您的位置不在0,0top:0px；左：0px，这将包括svg本身的偏移量。viewBox的偏移量不能包含此偏移量，因此需要以某种方式取消此偏移量。为了简单起见，我刚刚使用了SVG的客户机边界矩形，因为没有应用任何转换，所以它是有效的。

非常感谢。我想我们会完全按照你的建议去做。干杯