如何使SVG.js路径动画在移动和调整大小时遵循直线?
有两个部分的动画。首先,对SVG路径中的文本进行放大并移动到矩形的中心。之后,它需要缩小到原始大小,并移动到矩形的另一角。
第一部分根据需要进行动画,但第二部分文本移出查看区域,然后返回。
let draw = SVG('reading-area');
var group = draw.group();
original = group.svg(getSvgText());
original.animate(1000, '-', 0).move(229, 164).scale(3);
original.a
我使用svg.js在浏览器中操作SVGs。我所做的大部分工作都比较简单,但我在缩放/定位一些对象时遇到了一些困难。
我有一个SVG,其中包含一个“Pin”图标。您可以单击SVG来缩放它(这只是调整它的大小以填充浏览器视图),进而调整它的所有子程序的大小,包括Pin。我需要把这个图标缩小到它原来的36px x 36px大小,然后重新定位它,这样Pin的底部中心就在原来的位置上。我已经调整了尺寸,但重新定位的部分让我逃脱了。
一些示例状态:
以100%的比例定标,36px x 36px碱度为Pin。
被9.77241379放大,引脚缩小到它的基本尺寸36px x 36px。使
我有一个可以缩放的SVG,还有一个“重置”按钮。我正在用重置变焦
zoom.transform(selection, d3.zoomIdentity)
这将按预期工作并重置SVG上的缩放。但是如果我再次放大,它就会回到上一次的状态。例如,我滚动,按下“重置”按钮,然后缩小,->是放大的。如何重置zoom对象的内部缩放状态?尝试了不同的解决方案,但都不起作用。
这里是完整的缩放代码
//zoom cannot be done on the <svg> directly
var container = d3.select("#g5063")
var zoom =