How to scale an svg map using pinch-to-zoom with hammer.js?

Question

Android

The point is this. Need to scale in browser on mobile devices using pinch-to-zoom and rotate svg map.
Using scale3d or scale, at the moment of zooming, the map becomes a raster, so that everything is processed quickly. But after releasing the fingers, it is still raster unless css-transitions is enabled or redraw is performed. Enabling css-transitions is stupid, because everything lags, as the browser tries to make an animation between each state. But then she does redraw.
In the end, I settled on a hack

$(svg).hide();
$(svg).get(0).offsetHeight();
$(svg).show();

As a result, without the "blinking" of the svg element, it becomes sharp again without raster enlargement artifacts. There is a downside to this trick:
1) Doesn't work on the iphone
2) It's a dirty hack that can lead to further problems as well.
How, actually, to make this redraw normal?
Bonus:
How to rotate an svg map around the center between fingers using transform-origin? I don't understand how to do it properly.
Well, when svg becomes with the scale (x) value, you need to somehow increase the size of the parent block. What is the best way to do this so that there are no performance problems?