相对于所选地区中心缩放 SVG 国家地图

Question

我有一张 svg 国家地图，当您单击一个地区然后看到相对于所选地区的动画缩放时，我正在尝试实现效果，即在单击的地区中心使用transform-origin 点进行缩放。而且我希望不要使用任何库。

1. 首先，为什么here，当我们设置了svgviewBox 属性时，polygons 用getBoundingClientRect() 绘制的点与它们的实际元素不匹配svg、map、@ 987654331@?
2. 如果我们添加一些系数，例如here，那么我们需要什么viewBoxMapCoefX1 和viewBoxMapCoefX1，以便使用getBoundingClientRect() 点绘制的mapPolygon 匹配实际的map 元素？

3. 当我尝试通过添加来扩展 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 制作缩放动画（no SMIL）？

非常感谢您对此提供任何帮助或建议。

Answer 1

1) 您应该使用 .getBBox() 而不是 BoundingClientRect 来获取坐标，因为这将基于 SVG 本身而不是屏幕。

3) 您正在将变换应用到组标签，而将这些变换应用到 SVG 元素本身是有意义的。您可能已经尝试过，但是变换原点值将全部基于您之前获得的坐标？只要动画按预期工作，就我所见，动画正面没有问题。

// ANIMATION HERE
var svg = document.querySelector("svg");
svg.style.transformOrigin = '50% 50%';
svg.style.transform = 'scale(4)';

Answer 2

感谢@OwenAyres's answer 1 部分问题已解决。

我们可以在px 的% insted 中找到map 直接相对于所选区域中心进行缩放，然后将区域中心移动到map 的中心，然后进行缩放：

// 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;

并获取expected result。

但仍然存在一个问题，transformOriginX 和 transformOriginY 的哪些系数是正确的才能得到以下形式的结果：

map.style.transformOrigin = (transformOriginX) + "px " + (transformOriginY) + "px";
map.style.transform = "scale(" + scale + ")";