SVG Scale and position

Question

I have:

1. An SVG loaded into a DIV
2. This SVG and DIV are 100% width and fixed height

I am trying to:

1. Scale the SVG at center point of div
2. Drag the SVG at 1:1 ratio of mouse movement regardless of scale

What I get is:

• My SVG keeps scaling to top left coordinate 0,0
• Drag is not quite right at scale of 1, the further the SVG is dragged the more the incorrect value of x and y is (overshoot)
• Drag at scale of <1 || >1 vastly exagerates the overshoot and undershoot of the drag amount

Preview: https://codepen.io/Starglider/pen/RQGGqa

I need the equations for: - position of x relative to scale - position of y relative to scale

Pen Code Lines 126 to 136, I've put the function in an animation so that I can test the equation at a scale range of 0.5 to 1.5

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    function animate(){

        params.t += 0.01;
        var out = document.getElementById("output1");
        var targetX = Math.sin(params.t) * 100;
        var targetY = Math.cos(params.t) * 100;
        var c = 0.5 + (Math.sin(params.t) * 0.5);
        var scale = 1 + (Math.sin(params.t) * 0.5);

        var xOffset = 0;
        var xBefore = xOffset;
        var xAfter = -xOffset + (scale*-180); // What's the euqation for relative X for scale??

        var yOffset = -500;
        var yBefore = yOffset;
        var yAfter = yOffset * (scale); // What's the euqation for relative Y for scale??

        var msg = "";
        msg += "t:" + params.t.toFixed(3) + " ";
        msg += "scale:" + scale.toFixed(3);
        out.innerHTML = msg;

        setTransformMatrix(
            params.svg.svg.createSVGMatrix()
            .translate(xBefore, yBefore)
            .scale(scale)
            .translate(xAfter, yAfter)
            //.multiply( params.svg.g.getCTM().inverse())
            //.multiply( params.svg.g.getCTM() )
        );


        requestAnimationFrame(animate);
    }
    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

UPDATE: I've also created another version which doesn't manipulate the SVG itself but the DIV containers for it, similar result, still need that equation, preview here: https://codepen.io/Starglider/pen/qxaRdj

Any info, tips or code you can provide or link to will be helpful.

Thanks

D

Answer 1

Used an old school flash trick for centering and applying scale, 3 container nesting with image/svg placed in inner most container which is centered and then transforms are applied to the outer containers as needed thus no need for any SVG manipulation at all.

https://codepen.io/Starglider/pen/qxaRdj

<div id="map" class="noselect">

    <div class="drag-container">

      <div class="svg-outer-container">
        <div class="svg-container">

          <svg xmlns="http://www.w3.org/2000/svg" width="250px" height="250px" id="svg1" viewBox="0 0 250 250">
            <g id="g-element">
  <circle cx="125" cy="125" r="120" stroke="#0066CC" stroke-width="4" fill="#CC0000" />
            </g>
</svg>

        </div>
      </div>

    </div>

  </div>

https://codepen.io/Starglider/pen/qxaRdj