Масштабирование позиции курсора в документах SVG

Question

Пытается увеличить изображение до положения курсора. Я переводю изображение, когда я увеличиваю масштаб (масштаб), но у меня нет работы.

Если вы попробуете демонстрацию, вы не будете этого делать, если вы увеличите масштаб до одного места, переместите мышь и зум в другое место, круги скачут.

jsFiddle: http://jsfiddle.net/nadirabid/f06n05ep/9/

function setCTM(element, matrix) { 
 
    var m = matrix; 
 
    var s = "matrix(" + m.a + "," + m.b + "," + m.c + "," + m.d + "," + m.e + "," + m.f + ")"; 
 

 
    element.setAttributeNS(null, "transform", s); 
 
} 
 

 
var svgEl = document.getElementById('svg'); 
 
var zoomEl = document.getElementById('zoom'); 
 
var zoomScale = 1; 
 

 
svgEl.addEventListener('wheel', function(e) { 
 
    var delta = e.wheelDeltaY; 
 

 
    zoomScale = Math.max(0.5, zoomScale - (delta/2200)); 
 
    zoomScale = Math.min(zoomScale, 1.5); 
 

 
    var p = svgEl.createSVGPoint(); 
 
    p.x = e.clientX; 
 
    p.y = e.clientY; 
 

 
    p = p.matrixTransform(svgEl.getCTM().inverse()); 
 

 
    var zoomMat = svgEl.createSVGMatrix() 
 
    .translate(p.x, p.y) 
 
    .scale(zoomScale) 
 
    .translate(-p.x, -p.y); 
 

 
    setCTM(zoomEl, zoomMat); 
 
});

svg { 
 
    background-color: #eee; 
 
} 
 
body { 
 
    overflow: hidden; 
 
}

<svg id="svg" width="400" height="400"> 
 
    <g id="zoom"> 
 
    <circle r="40" cx="200" cy="200"></circle> 
 
    </g> 
 
</svg>

Answer 1

Это происходит потому, что вы полностью заменить старую матрицу, не принимая во внимание предыдущую историю "зума".

Что вы должны делать, это читать (или запоминать) старую матрицу, а затем применять к ней новые операции перевода и масштабирования.