我有一张svg国家地图,当你点击一个地区,然后看到相对于所选地区的动画缩放时,我正在努力实现效果,即在点击的地区中心使用transform-origin
点进行缩放。我更希望不要使用任何库。
- 首先,为什么这里,当我们设置了
svg
viewBox
属性时,用getBoundingClientRect()
点绘制的polygon
与它们的实际元素svg
、map
、e.target
不匹配 - 如果我们在这里添加一些系数,比如,那么我们需要什么
viewBoxMapCoefX1
和viewBoxMapCoefX1
,以便用getBoundingClientRect()
点绘制的mapPolygon
与实际的map
元素匹配 -
当我尝试通过添加来缩放
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 + ")";