Snap.svg 纸质对象答案

【问题标题】：Snap.svg paper-objectSnap.svg 纸质对象
【发布时间】：2013-11-17 19:38:59
【问题描述】：

我在摆弄 Snap.svg。我不想听起来真的很菜，但我没有在 API 文档中找到下一个示例；

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);
        });

这是 Iconmonstr 图标；

<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>

【问题讨论】：

不太确定你错过了什么......你有 var paper = Snap.select("#icon-parent")，然后是
哦，是的，我的错。这就是我尝试过但不起作用的方法，因此将 var paper 分配给 svg 本身不起作用，var paper = Snap() 也不起作用。
你试过 var paper = Snap.select("#icon-parent") 吗？（或另一个 CSS 元素）。或许贴个jsfiddle，看不懂的地方加个评论。
好的，这就是小提琴。按钮转换在 Chrome 中有效，但没有模糊：jsfiddle.net/myradon/pcAZT/10

标签： javascript svg snap.svg

【解决方案1】：

有几个问题，具体取决于您的目标。我认为模糊分配很好。它作为动画属性包含在内，这导致了我认为的问题。您可能还需要检查第二个 svg 宽度/高度和动画翻译，因为如果应用了过滤器，您可能会发现它会弹出它，因此需要进一步修改。我已经放大了小提琴中的 svg 宽度/高度，以便您可以看到。

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

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

【讨论】：

好吧，你的例子似乎或多或少有效。只有没有模糊动画（似乎用 fegaussianBlur-elm 生成过滤器元素）我试图在两种动画方法中都使用过滤器，但不起作用。很奇怪，因为 SMIL 和纯 JS 都应该可以看到这个例子srufaculty.sru.edu/david.dailey/svg/blurring.svg
Aha animate 是用 JS 完成的，可能适用于 IE9 和 IE10，但 blur-filter 是 JS 生成的 SMIL。
不确定你想要什么动画模糊，我以为你只是想在动画时模糊。如果这就是您的意思，您可以执行类似jsfiddle.net/pcAZT/23 的操作来为过滤器设置动画（将鼠标悬停在过渡上）
天啊，你是怎么想到这个的？你一直在做什么我不得不谷歌并最终在 MDN。实现这一点对我来说真的很困惑。我想你可以用 jQuery 的方式来做。就像动画元素的属性一样。好的... fegaussinablur 不是路径的属性。所以你应该对 SVG 和 SMIL 有透彻的了解。顺便说一句，在 Firefox 中，即使 transform-matrix 不起作用，也没有任何反应。希望 Snap 会有好的结果。
那么你将如何剖析这段代码； f = paper.filter(Snap.filter.blur(20,10));;我想我可以做类似 f = paper.filter.blur(20,10);