Snap SVG 中的蒙版元素在翻译时不会出现在视图中

Question

我有一组元素被 SnapSVG 中的矩形遮盖了，我想翻译这些元素，将新元素带入视图（并隐藏当前可见的元素）。代码非常简单 - 这是一个代码笔：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/

结果是当我翻译盒子组时，它带走了掩码。这仍然让我有点困惑——我猜是 mask 属性以某种方式导致了这个？无论如何，解决方案是对蒙版应用相反的平移以将其保持在原位。检查笔以查看它的运行情况，但基本上我只需要添加：

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

其中棘手的部分是您现在需要同步蒙版的移动和框组的移动。

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

Snap SVG 中的蒙版元素在翻译时不会出现在视图中

Masked element in Snap SVG doesn't come into view when translated

javascript

svg

snap.svg