Snap.svg纸张-对象

Question

我在摆弄Snap.svg。我不想听起来真的很低级，但我不明白API-docs中的下一个示例；

var f = paper.filter(Snap.filter.blur(5, 10)),
    c = paper.circle(10, 10, 10).attr({
        filter: f
    });

我在文档中搜索纸质实例，甚至是它引用的地方。我试图在悬停时得到一条模糊的路径。参见下一个示例；

        var paper = Snap.select("#icon-parent"),
            icon = Snap.select("#x-mark-icon"),
            f = paper.filter(Snap.filter.blur(5, 10));
        icon.hover(function(event) {
            this.animate({
                transform : "t110,150",
                filter: f 
            }, 200, mina.easeout);


        }, function(event) {
            this.animate({
                transform : "t0,0"
            }, 200, mina.easeout);
        });

这是图标图标；

<svg id="icon-parent" xml:space="preserve" enable-background="new 0 0 512 512" viewBox="0 0 512 512" height="40px" width="40px" y="0px" x="0px" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M256,50C142.229,50,50,142.229,50,256s92.229,206,206,206s206-92.229,206-206S369.771,50,256,50z M334.124,378.545l-77.122-77.117l-77.123,77.127l-41.425-41.449l77.106-77.117l-77.115-77.11l41.448-41.424l77.103,77.092 l77.09-77.102l41.459,41.432l-77.104,77.108l77.113,77.102L334.124,378.545z" id="x-mark-icon"/>
</svg>

Answer 1

有几个问题，取决于你想要的是什么。模糊赋值很好，我认为。它是包含在动画属性中的，我认为这是一个问题。你可能还需要检查第二个svg的宽度/高度和动画翻译，因为如果应用了滤镜，你可能会发现它在它的外面弹出，所以需要做一些进一步的修改。我在小提琴中放大了svg的宽度/高度，以便您可以看到。

icon.hover(function (event) {
    this.attr({ filter: f });
    this.animate({
        transform: "t10,10",    
    }, 200, mina.easeout);
...

在http://jsfiddle.net/pcAZT/11/有一把小提琴