Zoom карты скроллом
 

Доброго времени суток, делаю интерактивную карту, подскажите пожалуйста как увеличивать ее при скроле, нарезаю svg

<svg viewBox="0 0 1821.3333 1138.6667">
			<path class="sector-1 area" d="m 510.39688,236.47144 24.88449,32.56162 67.50581,-17.47209 c -12.0776,-15.78552 -25.51801,-29.2997 -39.7093,-41.5624 z"></path>
			<path class="sector-2 area" d="m 561.48951,310.33074 66.71163,-14.29535 c -9.23214,-19.66037 -17.41297,-34.5899 -23.82558,-41.5624 l -66.4469,16.94263 c 8.19087,12.80308 16.70891,25.44257 23.56085,38.91512 z"></path>
			<path class="sector-3 area" d="m 578.69687,359.30554 78.88915,-16.14845 c -4.79821,-10.65119 -17.93537,-28.59897 -27.79651,-43.68023 l -66.18217,14.82481 z"></path>
			<path class="sector-4 area" d="M 590.87439,408.8098 699.67788,389.74934 662.35113,347.39275 578.9616,363.01174 Z"></path>
			<path class="sector-5 area" d="M 600.93408,450.63693 736.47516,426.2819 701.53098,393.72027 592.72749,414.10438 Z"></path>
		</svg>
		<img src="img/map.jpg" class="map">

Заверни контейнер карты в ещё один и дай новому overflow: hidden. На window (или что у тебя скроллится - зависит от ситуации, может какой-то конкретный div - тогда на него) повесь event scroll и в базовый контейнер добавь через elem.style или $elem.css() если есть jquery transform: scale() в значение скейла закинь высчитанную необходимую пропорцию. Например, i = 0, в event i = i + 0.01 и transform: scale(i) . Или 0.02. В зависимости от того какая тебе нужна пропорция. Ну и соответственно в ивенте раздели scroll на 2 направления - top и bottom. Код можешь на stackoverflow нарыть - там такого барахла полно. Если скроллят в top, значит i = i - 0.01, если вниз, то с плюсом