How to programmatically enlarge SVG on click?

Question

JavaScript

I am using SVGP. Everything is perfectly scaled by mouse scroll.
However, it turned out that not everyone has a mouse wheel.
I wanted to make 2 buttons for zooming in and out, but there is no documentation. Didn't find the answer on google.
Maybe someone has dealt with something similar.

Answer 1

I'm not familiar with the library, but as far as I can see from the demo ( www.cyberz.org/projects/SVGPan/tiger.svg ) the following matters:
1. onmouseup="handleMouseUp(evt)"
2. onmousedown="handleMouseDown(evt)"
3 handleMouseMove(evt)
It looks like it's enough to call them when the button is clicked, or use them as an example to extend the code.
Required code in this place:

/**
 * Handle mouse move event.
 */
function handleMouseMove(evt) {
  if(evt.preventDefault)
    evt.preventDefault();

  evt.returnValue = false;

  var svgDoc = evt.target.ownerDocument;

  var g = getRoot(svgDoc);

  if(state == 'pan' && enablePan) {
    // Pan mode
    var p = getEventPoint(evt).matrixTransform(stateTf);

    setCTM(g, stateTf.inverse().translate(p.x - stateOrigin.x, p.y - stateOrigin.y));
  } else if(state == 'drag' && enableDrag) {
    // Drag mode
    var p = getEventPoint(evt).matrixTransform(g.getCTM().inverse());

    setCTM(stateTarget, root.createSVGMatrix().translate(p.x - stateOrigin.x, p.y - stateOrigin.y).multiply(g.getCTM().inverse()).multiply(stateTarget.getCTM()));

    stateOrigin = p;
  }
}