Суть вот какая. Нужно масштабировать в браузере на мобильных устройствах с помощью pinch-to-zoom и rotate svg-карту.
Используя scale3d или scale, в момент увеличения, карта становится растровой, чтобы быстро все обрабатывалось. Но после отпускания пальцев она по-прежнему растровая, если не включить css-transitions или не произвести redraw. Включать css-transitions глупо, потому что все лагает, так как браузер пытается между каждым состоянием сделать анимацию. Но зато она делает redraw.
В итоге я остановился на хаке
$(svg).hide();
$(svg).get(0).offsetHeight();
$(svg).show();
В результате без "мигания" элемента svg становится заново четкой без растровых артефактов увеличения. Есть одно но у этого приема:
1) Не работает в iphone
2) Это грязный хак, который к тому же может привести к дальнейшим проблемам.
Как, собвстенно, сделать этот redraw нормально?
Бонус:
Как крутить svg-карту относительно центра между пальцами с помощью transform-origin? Не пойму никак, как это сделать адекватно.
Ну и когда svg становится со значением scale(x) нужно как-то увеличивать размер родительского блока. Как это лучше делать, чтобы не было проблем с производительностью?
