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

#javascript #html #css3 #анимация #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

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