1

所以我使用 svg-pan-zoom 来显示一个动态加载的 SVG 元素。加载元素的代码与此处的示例类似：https ://ariutta.github.io/svg-pan-zoom/demo/dynamic-load.html （要了解我的意思，请查看源代码）。

我想要做的是在 SVG 文档中搜索与特定查询匹配的文本标签。我在这里找到了一个示例，这似乎是该部分的解决方案，但我找不到任何关于如何访问 svg-pan-zoom 中的 SVG 内容的信息。

恐怕我没有任何代码......我已经试错了很长一段时间了。基本上我只是想弄清楚如何访问 SVG 内容以便我可以搜索它。

谢谢！

4

1 回答 1

0

我认为这个答案可能很有用：平移到特定的 X 和 Y 坐标和中心图像 svg-pan-zoom

例如，假设您要查找包含在 tspan 中的字符串（因为您没有提供更多详细信息），那么您可以有一个搜索框，当它发生变化时，会调用以下函数：

function searchTerm() {
    let term = this.value;
    
    var tspans = document.getElementsByTagName("tspan");
    var found;

    for (var i = 0; i < tspans.length; i++) {
      if (tspans[i].innerHTML.includes(term)) {
        found = tspans[i];
        break;
      }
    }

    let position = found.parentNode.parentNode.getAttribute("transform").split("translate(")[1].split(")")[0];
    let posX = position.split(",")[0];
    let posY = position.split(",")[1];
    

panZoom.zoom(1);
panZoom.pan({x:0,y:0});
var realZoom= panZoom.getSizes().realZoom;
panZoom.pan
({  
x: -(posX*realZoom)+(panZoom.getSizes().width/2),
y: -(posY*realZoom)+(panZoom.getSizes().height/2)
});
}

如您所见，此代码是针对特定情况准备的，但您可以根据需要获得位置。

于 2020-07-21T14:16:09.113 回答