Is it possible to zoom on a path by ID?

[CristianEstiber]

For example you can zoom on coords like panZoom.zoomAtPoint(2, {x: 50, y: 50}), is there a way to tell a path ID and zoom there?

EDIT: also I'm trying to zoom at point sending coordinates but if I moved or zoomed my svg before it doesn't go to the desires coords

EDIT: here is my question on stackoverflow https://stackoverflow.com/questions/59579575/how-to-get-x-y-coordinates-from-path-element-inside-svg

[brasofilo]

OP received a nice answer at SO. Here's the demo: https://jsfiddle.net/04Lg9ruj/

And I adapted their code to this to get the points coordinates:

//Find your root SVG element
var Mapa = document.querySelector('#mapa-mundi');
var SVGDoc = Mapa.getSVGDocument(); 
var svg = SVGDoc.documentElement; 

//Create an SVGPoint for future math
var pt = svg.createSVGPoint();

//Get point in global SVG space
function cursorPoint(evt){
    pt.x = evt.clientX; pt.y = evt.clientY;
    return pt.matrixTransform(svg.getScreenCTM().inverse());
}

svg.addEventListener('click',function(evt){
    var loc = cursorPoint(evt);
    alert(loc.x+" "+loc.y);
},false);

[wassfila]

@CristianEstiber I answered your question on stack overflow, here also a link for the demo and a gif for those just curious to see the end result https://www.homesmartmesh.com/docs/microcontrollers/nrf52/thread_sensortag/?svg=nrf52-sensor-tag&text=VEML6030

[wassfila]

@bumbu, if you'd like to take this upstream I'd help to contribute to this nice library, apparently such zoom on id, text with transitions and effect are demanded features. The code is available here https://github.com/WebSVG/hugo-book/blob/7a7d44ea0f7f91a51c15bcb8e8efd294ef29f42f/static/js/setup-svg-pan-zoom.js#L70

[bumbu]

Hey @wassfila Thanks for sharing the examples. It is always great to see that people find this library useful and adapt it to their needs. Right now there's no active development happening to the library, but I'm happy to review and accept well tested pull requests. Looking at your code, probably the best would be to:

• Add a new method for zooming onto elements
• Add all the great examples that you have into the demo folder This should ensure that we add most generic use-cases to the library with minimal risk of breaking existing APIs, and also provide examples for more advanced use-cases (such as animations and timed transitions).

For the new API we could add something like focusOn which would take a DOM node or id as first argument, and some options as second. For options the only thing that I could think right now (that is also generic) is how much should we zoom on the desired element. For example if the viewport has 1000px width, and we want to focus on a rectangle that has 100px width, but make it so that it only takes 50% of the viewport, we could specify it as zoomOn('#my-element-id', {scale: 0.5}).

Let me know what are your thoughts, if you think we need a more flexible/strict API, or any other ideas you have. Or just feel free to open a PR and we can continue the discussion there :)

[wassfila]

Thank you @bumbu for the feedback, I understand you, I also have many concepts developed for fun but then we have to move on. I'm a bit intimidated by the toolchain, I managed to build it to fix a bug var passiveOption = {passive: true}; but I'm not that confident, also self learning web and got more used to the modules approach. It's not only about throwing a function but also testing it and documenting it. Your library might be minimal but well packed and clear so maybe those corner cases can stay for those seeking advanced dev and can handle it themselves, if you collect references of all those who used your library that might leverage a lot of reuse between those projects. My environment of choice is hugo markdown and short codes.

If to give a though about the API (just for those it might inspire), I see three options :

• 1) exactly as requested in this issue => just zoomOn('#my-element-id') and that would fit it maybe with 5% margin around it
  • 2) second in case it's a small item that should not appear gigantic as you mentioned zoomOn('#my-element-id', {scale:0.5})
  • 3) third is actually a lower level function that I'm using to, simply x, y relative coordinates, e.g. zoomOn({x:0.5, y:0.5, scale:2}) being the middle of the viewport
  • 4) for convenience simply any text, and I actually search in both text and span tags zoomOn({text:"my-text"})

https://www.homesmartmesh.com/docs/microcontrollers/nrf52/thread_sensortag/?svg=nrf52-sensor-tag&x=0.5&y=0.5&z=3.4#schematics