Как реализовать плавный pinch-to-zoom с помощью hammer.js?

Question

[Павел]

Есть svg-файл, который нужно приближать и отдалять с помощью щипков pinch-to-zoom. Как на всяких там яндекс.картах.
Проблема лишь в том, что используя transform: scale() и добавляя transitions увеличение и уменьшение svgкарты происходит рывками. Хотя циферки event.scale (на сколько там мы сдвинули/раздвинули пальцы) очень резво бегают. Пробовал засунуть в рекурсивную requestAnimationFrame - не помогло.

Ведь как-то это реализуется? Без лагов, тормозов.

P.S.: если масштабировать сам тег svg или его родитель, то объект увеличивается растеризованным, а вот если какой-нибудь тег внутри svg, например, родительский , то все масштабируется без растровых размытий.

var myElement = document.getElementById('gf-root');

var mc = new Hammer.Manager(myElement);

// create a pinch and rotate recognizer
// these require 2 pointers
var pinch = new Hammer.Pinch();
var rotate = new Hammer.Rotate();

// we want to detect both the same time
pinch.recognizeWith(rotate);

// add to the Manager
mc.add([pinch, rotate]);

var target = $('.map-controls');
mc.on("pinch rotate", function(ev) {
    $('.logotext .txt').text(ev.scale);

    function animate() {
        requestAnimationFrame( animate );
        target.css('transform', 'scale('+ev.scale+')')
    }
    requestAnimationFrameanimate();
});

P.P.S.: если дело в том, что сам файл svg тяжелый (он вставляется в Html с помощью php), то небольшой с кнопочкой тоже увеличивается, дергаясь.