Question

我有一张svg国家地图，当我点击一个区域然后看到相对于所选区域的动画缩放比例时，我试图达到效果，即在transform-origin点的中心缩放一个点击的区。我希望不使用任何库。

首先，为什么here，当我们设置了svg viewBox属性时，使用polygon点绘制的getBoundingClientRect()不匹配他们的实际元素svg，map，e.target？
如果我们添加一些系数，例如here，那么我们需要viewBoxMapCoefX1和viewBoxMapCoefX1，所以mapPolygon点getBoundingClientRect()点与实际map相匹配元素？

当我尝试通过添加：{/ p>来扩展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)';

Answer 2

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

我们可以在map % px {}}}中找到地区的中心，而不是相对于选定的地区中心直接缩放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

并获取expected result。

但仍有一个问题，transformOriginY和map.style.transformOrigin = (transformOriginX) + "px " + (transformOriginY) + "px"; map.style.transform = "scale(" + scale + ")";的系数是否正确，以便以下列形式得到结果：

print(brute_prime(1000))

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

2 个答案: