Search code examples
csssvgshadowsnap.svg

Snap SVG & Material Shadows

I would like to have Google Material shadows on my SVG elements. I am using Snap SVG and I have found a way to use shadow filters on my elements:

element.attr({
    filter : s.filter(Snap.filter.shadow(0, 19, 38, 'black', 1))
});

What I can't find is the settings I have to input for each of the Material shadows.

What I tried:
I found several codepens such as this which have material shadows using CSS, and I tried to take the box-shadow settings from them and use the same settings, but mine just got much bigger.

From what I researched, box-shadow take the settings in pixels, and according to the Snap SVG docs, so does Snap SVG.

I can't seem to understand why both take the setting in pixels, but Snap SVG is just much more.

-- I also tried some trial and error, but I can't imagine how long it will take to find out all the different settings for all the different Material Shadows.

So to clarify things a little, what I really would like to know is the Snap SVG shadow filter setting, for each of the Google Material Shadow.
The reason is that I want a button that cycles between the shadows.

Thank you for your help.

EDIT

Actually, it looks like I was doing the opacity wrong.
My filter now resembles the Material shadow much better.
However, I notice that the codepens that use CSS for Material shadows use multiple box-shadows. How can I do that with Snap SVG? (Have multiple shadows)

SOLUTION

So what I did was to define a couple of defs in the SVG.
I found an SVG with Material Shadows which helped me define my defs for each level of shadow.
I then did as @Ian suggested and used the defs with Snap SVG.

Solution

  • I'm not quite sure from your description why you still can't use the css style you have found that you like. No reason you can't switch styles by toggling a button unless I'm misunderstanding something.

    Its a bit fiddly doing complex filters in Snap, but if you find one just from regular svg markup, you can use it, by either 'parsing' the svg markup, or using some thats already existing in a defs statement for example.

    E.g you could go to a page like this... filter codepen Grab the created markup, and then put it in a defs statement or parse('markup') it.

    Then you can use it like...

    element.attr({ filter: Snap('#myFilterId') });

    eg jsfiddle created using the above codepen and just pasted into a 'defs' statement and used with above line.