svg元素 - 滚动到/居中

Question

我在页面上动态创建了一个svg。当事情“发生”（用户点击）时，svg会扩展并折叠某些元素。它可能适合视口，也可能不适合。如果它太大而不适合页面，用户必须滚动到s（他）想去/看的地方。现在这很好，但是我要求最后一个元素“selected”成为页面/视口的中心。即如果他们点击某个项目，那就是他们需要看到而不用滚动。

有人能告诉我攻击它的最佳方法吗？我已经用Google搜索了但找不到我要找的东西（虽然我不是很长时间，所以我可能一直在寻找错误的东西）。

有没有办法用javascript完全以编程方式执行此操作？或者我不得不通过CSS来获得我想要的解决方案。任何提示/链接/建议非常感谢。

谢谢，祝你有愉快的一天

Answer 1

我有类似的事情，我使用viewBox属性来处理这个问题。您还可以使用您翻译的包装<g>元素。但是，从我的观点来看，基本方法是相同的，你基本上需要做两件事：

1. 跟踪x和y偏移量以及视口的尺寸。 （使用viewBox将为您提供»免费«）
2. 计算元素的中心。因此，我使用getBoundingClientRect()方法，相对于整个页面的左上边缘，在绝对坐标空间中生成元素的AABB。

有了这些东西，剩下的就是计算从视口中心到物体中心的矢量。

Here你可以找到关于它的viewBox和here一个很好的教程的参考，因为它在开始时可能有点令人困惑。

»viewBox«方法的另一个专家是：不依赖于特殊的DOM元素，它只适用于根<svg>元素。我曾经实现过这两种方法，我开始使用包装<g>元素，什么工作正常，但给了我一些性能问题。因此，我决定更改并使用viewBox，结果是Firefox中的性能增长，但在Chromium中速度减慢。

修改

Here you can find a little小提琴，概述了这种方法。但请注意以下事项：getBoundingClientRect()在整个页面上产生元素的位置，因此如果<svg>未定位在（0,0）（顶部：0px;左：0px），比那将包括svg本身的偏移量。 viewBox的偏移量不得包含此偏移量，因此您需要以某种方式取消该偏移量。为了简单起见，我只使用了SVG的客户端Bounding Rect，这是有效的，因为没有应用转换。