amitghosh18 / svgpan

Automatically exported from code.google.com/p/svgpan
0 stars 0 forks source link

Problems with setCTM when the viewBox transformation is large #30

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
What steps will reproduce the problem?
1. Create an svg with top level like:

<svg width=400 height=400 viewBox="0 0 10000 6000">
<g id="g" transform="scale(1 1) rotate(0) translate( 5 6000 )">...</g>
</svg>

2. Attempt a scaling transformation via mouseWheel

What is the expected output? What do you see instead?

The view should scale around the mouse cursor point.  Instead, the scaled view 
jumps to a new point.

What version of the product are you using? On what operating system? Top of 
tree.  I'm actually using jquery-svgpan, but the critical routines are the same.

Please provide any additional information below.

The problem arises because the setCTM routine does not take into account the 
viewBox transformation.  I was able to fix this set of problems by substituting 
the following implementation of setCTM:

setCTM = function (element, matrix) {
    element.transform.baseVal.consolidate();

    // The goal is to set element.transform to some matrix T='mat2' 
    // such that the new CTM is equal to the given input matrix.  The 
    // expression we need for 'mat2' is 
    //   T=(newCTM)*(inverse(oldCTM))*oldT .
    var mat2 = element.transform.baseVal.getItem(0).matrix.multiply(element.getCTM().inverse()).multiply(matrix);
                    element.transform.baseVal.replaceItem(element.transform.baseVal.createSVGTransformFromMatrix(mat2), 0);
},

Original issue reported on code.google.com by Joel.Wel...@gmail.com on 31 Jan 2014 at 10:52