Javascript 将焦点设置为大型svg文档中的任意节点

我有一个包含很多节点的大型svg文档，下面是一个简单的示例

我的部分要求是能够有一个菜单，您可以在其中选择以下示例中的六边形节点之一，然后重点将放在该节点或六边形上

如何将文档定位到任何节点

例如，如果单击示例中的按钮，如何将焦点放在最右边的六边形上

我想我可以使用viewBox，但我想知道如何实现这一点

我可以使用minX和minY，这是viewBox的前两个参数

但是我该如何设置这些值呢

我会从节点的getBBox值中得到x和y吗

常数SVGhttp://www.w3.org/2000/svg'; 常量SVG_XLINK=http://www.w3.org/1999/xlink; 设A=-1200； 设B=1200； 设hexArray=[] 函数drawHexagonr{ 设分数=； 对于let i=1；i我向元素添加了tabindex属性。这有助于使这些六边形成为焦点

当您单击按钮时，您会聚焦其tabindex为20的元素。然后，当您单击键盘上的tab键时，您会将焦点移动到下一个六边形

我将svg的viewBox属性设置为焦点元素的x属性值的一部分

常数SVGhttp://www.w3.org/2000/svg'; 常量SVG_XLINK=http://www.w3.org/1999/xlink; 设A=-1200； 设B=1200； 设hexArray=[] 函数drawHexagonr{ 设分数=；

---

对于let i=1；i如果我理解正确，您希望放大选定的节点。正如您编写的，您可以使用。我已将以下代码片段添加到您的代码中：

var svg = document.getElementById('svg')
document.getElementById('useParent').addEventListener('click', evt => {
  if(evt.target.nodeName === 'use') {
      focusNode(evt.target);
  }
});
function focusNode(node) {
    var bbox = node.getBBox()
    svg.setAttribute('viewBox', `${bbox.x - 250} ${bbox.y - 30} 600 275`)
    node.setAttribute('style', 'fill:red;');
    //TODO: need to clear the previous selection
}
document.querySelector('button').addEventListener("click",()=>{
  focusNode(hexArray[0]);
});

它将viewBox的宽度和高度减半：600 275比原来的1200 550。基本上是2倍的缩放。它更改了viewBox的min-x和min-y，使六边形大致位于SVG的中心

常数SVGhttp://www.w3.org/2000/svg'; 常量SVG_XLINK=http://www.w3.org/1999/xlink; 设A=-1200； 设B=1200； 设hexArray=[] 函数drawHexagonr{ 设分数=； 对于let i=1；i{ focusNodehexArray[0]； }; svg{ 边框：1px实心； } 使用{ 填充物：白色； 中风：000； } itr{ 宽度：500px； 显示：块； 利润率：2米自动； } 连接器路径{ 填充：无； 笔画：黑色； } 工具提示{ 位置：绝对位置； } 正文{ 优势基线：中等； 文本锚定：结束； } 选择第一个节点

---

这不是画布，我只是想知道如何定位查看器。我不是要求选择，我可以处理焦点。在vg.setAttributeNSnull、viewBox、${posX-600}中，600从何而来- 50 1200到550；我想要在SVG画布中间的六边形焦点。六边形X的位置是POSX。SVG画布的宽度是1200个用户单元。1200/2＝600。