javascript - 相对于所选地区中心缩放 SVG 国家 map

Question

我有一个 svg 国家 map ，当您单击一个地区，然后看到相对于所选地区的动画缩放时，我试图实现这种效果，即使用 transform-origin 点进行缩放单击的区域的中心。我宁愿不使用任何库。

1. 首先，为什么here ，当我们设置了 svg viewBox 属性时，使用 getBoundingClientRect() 点绘制的 polygon 与它们的点不匹配实际元素svg、map、e.target？
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 制作缩放动画(无 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)';