Question

我有一组由SnapSVG中的rect屏蔽的元素，我想翻译元素，将新元素带入视图（并隐藏当前在视图中的元素）。代码非常简单 - 这是一个codepen：http://codepen.io/austinclemens/pen/ZbpVmX

正如你从笔中看到的那样，在面具元素（剪辑）之外开始的box1应该在动画时穿过它，但它永远不会出现。此外，应该移出剪辑区域的box2仍然可见。

这个例子似乎做了类似的事情并且没有问题：http://svg.dabbles.info/snaptut-masks2

以下是codepen中的代码：

var t = Snap('#target')
var clip=t.rect(200,200,200,200).attr({fill:'#fff'})

var box1=t.rect(300,100,50,50).attr({fill:'#000'})
var box2=t.rect(300,300,50,50).attr({fill:'#000'})
var boxgroup=t.group(box1,box2)
boxgroup.attr({mask:clip})

boxgroup.animate({transform:'t100,300'},2000)

我注意到svg.dabbles示例在一个点上将剪辑区域翻译为0,0，但是添加类似的东西似乎并没有让我在任何地方。

Answer 1

好的，我想到了这一点，部分归功于这篇关于SVG转换的非常棒的文章：http://sarasoueidan.com/blog/svg-transformations/

结果是，当我翻译盒子组时，它会带上面具。这对我来说有点混乱 - 我猜掩码属性是以某种方式造成的？无论如何，解决方案是对掩模应用相反的平移以使其保持在适当的位置。检查笔是否有效，但基本上我只需添加：

clip.animate({transform:'t-100,-300'},2000)

这个棘手的部分是你现在需要同步面具的移动和盒子组的移动。

编辑 - 我现在演示如何使用snap的set.animate方法在codepen上实现同步。

Snap SVG中的蒙板元素在翻译时不会进入视图

1 个答案: