Масштабирование SVG карты страны относительно выбранного округа

Есть SVG карта страны. Нужно достичь эффекта, чтобы при клике на округе происходило бы масштабирование относительно центра выбранного округа, т.е. transfrom-origin должен находится в центре выбранного округа. Хотелось бы обойтись без каких-либо библиотек
Первый вопрос это почему здесь, когда задано значение viewBox, то polygon'ы построенные по точкам, полученным от getBoundingClientRect(), не совпадают с самими элементами svg, map и e.target? Если добавлять коэффициенты, как тут, то какие тогда должны быть значения у viewBoxMapCoefX1 и viewBoxMapCoefX1, чтобы полученный mapPolygon совпадал с map? Если масштабировать map с помощью:
// ANIMATION HERE map.style.transformOrigin = transformOriginX + "px " + transformOriginY + "px"; map.style.transform = "scale(" + scale + ")";
то выглядит так, как будто значение transformOrigin неверное. Если попытаться изменить viewBox
// ANIMATION HERE svg.viewBox.baseVal.x = bounding.left; svg.viewBox.baseVal.y = bounding.top; svg.viewBox.baseVal.width = bounding.width; svg.viewBox.baseVal.height = bounding.height;
то как тогда можно сделать плавную анимацию масштабирования только средствами CSS (без SMIL)?
Буду благодарен любой помощи и советам по делу.

Ответ

1) Нужно использовать .getBBox() вместо getBoundingClientRect(), чтобы получить координаты относительно самого SVG, а не экрана. Результат
3) Вместо масштабирования карты относительно центра выбранного субъекта (transformOrigin + scale) можно центр субъекта получить в % вместо px и переместить в центр карты, а потом сделать масштабирование, т.е.:
// ANIMATION HERE var transformOriginXPercent = (50 - transformOriginX * 100 / mapBounding.width) * scale; var transformOriginYPercent = (50 - transformOriginY * 100 / mapBounding.height) * scale; var scaleText = "scale(" + scale + ")"; var translateText = "translate(" + transformOriginXPercent + "%," + transformOriginYPercent + "%)";
map.style.transformOrigin = "50% 50%"; map.style.transform = translateText + " " + scaleText;
и тем самым достичь нужного результата
В целом вопрос решен, однако интересно, как можно достичь этого же эффекта с помощью:
map.style.transformOrigin = (transformOriginX) + "px " + (transformOriginY) + "px"; map.style.transform = "scale(" + scale + ")";
подобрав правильные коэффициенты для transformOriginX и transformOriginY