Snap.svg paper-object

Question

I'm fiddling with Snap.svg. I don't want to sound really noobish but I don't get the next example in the API-docs;

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

I'm searching in the docs for the paper instance or even where it refers to. I'm trying to get a blurred path when hovering. see next example;

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

this is the Iconmonstr icon;

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

Not quite sure what bit you are missing... you have var paper = Snap.select("#icon-parent"), and then — Ian, Nov 06 '13 at 20:52
Oh yes my bad. That's what I tried but doesn't work so assigning var paper to the svg itself doesn't work nor does var paper = Snap(). — myradon, Nov 07 '13 at 11:17
Did you try var paper = Snap.select("#icon-parent") ? (or another css element). Maybe post up a jsfiddle, add a comment on the lines you don't understand. — Ian, Nov 07 '13 at 12:50
Okay here is the fiddle. button transition works in Chrome but no blur: http://jsfiddle.net/myradon/pcAZT/10/ — myradon, Nov 07 '13 at 13:24

Ian · Answer 1 · 2013-11-07T14:24:14.927

0

There's a couple of issues, depending on what you are after. The blur assignment is fine I think. Its that its included as an animation attribute thats causing a problem I think. You may also need to check the 2nd svg width/height and the animation translation, as you may find it pops outside it if the filter is applied, so will need some further amendment. I've enlarged the svg width/height in the fiddle just so you can see.

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

There's a fiddle at http://jsfiddle.net/pcAZT/11/

edited Nov 07 '13 at 14:24

answered Nov 07 '13 at 14:17

Ian

13,724
4
52
75

Okay your example seems to work more or less. Only no animation of blur (seems to generate filter-element with fegaussianBlur-elm) I tried to put filter in both animate-methods but doens't work. Is odd because it should be possible both with SMIL and pure JS see this example http://srufaculty.sru.edu/david.dailey/svg/blurring.svg – myradon Nov 14 '13 at 14:04
Aha animate is done with JS probably for IE9 and IE10 but blur-filter is JS-generated SMIL. – myradon Nov 14 '13 at 14:28
Not sure what animation you want on blur, I thought you just wanted blur when animating. You could do something like http://jsfiddle.net/pcAZT/23/ to play with animating a filter if thats what you mean (leave mouse hovered over for transition) – Ian Nov 14 '13 at 15:06
OMG how did you come up with this? What you've been doing I had to Google and ended up at MDN. It's really confusing for me to accomplish that. I would asume you could do it the jQuery-way. Like animating an attribute of an element. Okay...fegaussinablur isn't an attribute of the path. So you should have thorough understanding of SVG and SMIL. By the way in Firefox nothing happens even transform-matrix doesn't work. Hopefully good tuts will come for Snap. – myradon Nov 14 '13 at 17:09
So how would you dissect this piece of code; f = paper.filter(Snap.filter.blur(20,10));; I would asume I could do something like f = paper.filter.blur(20,10); – myradon Nov 14 '13 at 17:19
http://jsfiddle.net/pcAZT/25/ should work in ffx btw, was a bug in the earlier stuff. I'm not totally sure how well some of the animation stuff is supported across browsers, so I would always test well (I couldn't get the hover out working properly, but it could be my lack of understanding, also I'm not sure chrome resets the animation, not sure which is correct). – Ian Nov 14 '13 at 17:21
I don't think f = paper.filter.blur(20,10); would work, as filter is a function in this instance. paper.filter is a function which creates a filter element (from docs). Whereas Snap.filter is an actual object which contains several elements, of which blur is one that you can use (it also contains shadow, brightness etc). So f is being assigned a created filter which has used the Snap.filter.blur element for its basis, is my understanding. – Ian Nov 14 '13 at 17:34
Btw yes I assume you could animate in other ways, and I suspect it may be more supported as well. – Ian Nov 14 '13 at 17:51
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/41206/discussion-between-ian-and-myradon) – Ian Nov 14 '13 at 17:51

Snap.svg paper-object

1 Answers1