相对于选定的地区中心缩放SVG国家/地区地图

Scaling SVG country map relative to the selected district center

本文关键字：地区 SVG 国家 地图 缩放 相对于      更新时间：2024-05-10

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

  1. 首先，为什么这里，当我们设置了svg viewBox属性时，用getBoundingClientRect()点绘制的polygon与它们的实际元素svg、map、e.target不匹配
  2. 如果我们在这里添加一些系数，比如，那么我们需要什么viewBoxMapCoefX1和viewBoxMapCoefX1，以便用getBoundingClientRect()点绘制的mapPolygon与实际的map元素匹配

  3. 当我尝试通过添加来缩放map时

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

    看起来CCD_ 15的值是错误的。如果我试图通过添加来更改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()而不是BoundingClientRect来获取坐标，因为这将基于SVG本身而不是屏幕。

3） 您正在将转换应用于group标记，而将这些转换应用于SVG元素本身是有意义的。你可能已经尝试过了，但变换原点值都将基于你之前获得的坐标？只要动画按预期工作，从我所看到的动画方面没有问题。

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

感谢@OwenAyres的回答，问题的一部分已经解决。

我们可以在%而不是px中找到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;

并得到了预期的结果。

但transformOriginX和transformOriginY的系数是正确的，以获得以下形式的结果仍然是一个问题：

map.style.transformOrigin = (transformOriginX) + "px " + (transformOriginY) + "px";
map.style.transform = "scale(" + scale + ")";
相关文章：