CODEWITHSUNDEEP
javascripthtmlsvgsvgpanzoom
Patrick Flynn
Patrick Flynn

Reputation: 11

Search SVG in svg-pan-zoom

So I am using svg-pan-zoom to display a dynamically loaded SVG element. The code for loading the element is similar to the example here: https://ariutta.github.io/svg-pan-zoom/demo/dynamic-load.html (to see what I mean, view the source).

What I am trying to do is search the SVG document for text tags that match a specific query. I found an example here which seems like the solution to that part, but I can't find anything on how to access the SVG content inside svg-pan-zoom.

I'm afraid I don't have any code... I've been doing trial-and-error for quite a while now. Basically I'm just trying to figure out how to access the SVG content so I can search it.

Thanks!

Upvotes: 1

Views: 556

Answers (1)

nicolopinci
nicolopinci

Reputation: 1

I think this answer can be useful: Pan to specific X and Y coordinates and center image svg-pan-zoom

For example, let's suppose you want to look for a string that is contained inside a tspan (since you are not giving more details), then you can have a search box, and when it changes, the following function is called:

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)
});
}

As you can see, this code has been prepared for a specific situation, but you can get the position depending on your needs.

Upvotes: 0

Related Questions