Snap SVG & Material Schatten

Question

Ich möchte Google Material Schatten auf meinen SVG-Elementen haben. Ich bin mit Snap-SVG und ich habe eine Art und Weise zu verwenden, Schatten Filter auf meine Elemente gefunden:

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

Was kann ich nicht finden, ist die Einstellungen, die ich für jeden der Werkstoff Schatten zu Eingang.

Was ich versuchte:
ich mehrere codepens wie this gefunden, das Material Schatten haben mit Hilfe von CSS, und ich versuchte, die box-shadow Einstellungen von ihnen zu nehmen und die gleichen Einstellungen verwenden, aber ich habe einfach viel größer .

Von dem, was ich recherchiert habe, nehmen Box-Schatten die Einstellungen in Pixel, und entsprechend der Snap SVG-Dokumentation, Snap-SnapG.

Ich kann nicht zu verstehen, warum beide die Einstellung in Pixeln nehmen, aber Snap SVG ist nur viel mehr.

- Ich habe auch einige Versuch und Irrtum versucht, aber ich kann mir nicht vorstellen, wie lange es dauern wird, um die verschiedenen Einstellungen für die verschiedenen Materialschatten herauszufinden.

---

So die Dinge ein wenig zu klären, was ich möchte wissen, ist wirklich die Schnapp SVG Schatten Filtereinstellung, für jede der Google-Material Schatten.
Der Grund ist, dass ich eine Schaltfläche möchte, die zwischen den Schatten wechselt.

Vielen Dank für Ihre Hilfe.

---

EDIT

Eigentlich sieht es aus wie ich die Opazität falsch tat.
Mein Filter ähnelt jetzt dem Material Schatten viel besser.
Ich stelle jedoch fest, dass die Codepren, die CSS für Material Schatten verwenden, mehrere Box-Schatten verwenden. Wie kann ich das mit Snap SVG machen? (Haben mehrere Schatten)

---

SOLUTION

Also, was ich tat, war ein paar defs in der SVG zu definieren.
Ich habe eine SVG mit Material Shadows gefunden, die mir geholfen hat, meine Defs für jede Schattenstufe zu definieren.
habe ich dann als @Ian vorgeschlagen und die defs mit Snap SVG verwendet.

Answer 1

Ich bin nicht ganz sicher aus Ihrer Beschreibung, warum Sie immer noch nicht den CSS-Stil verwenden können, den Sie gefunden haben, dass Sie mögen. Es gibt keinen Grund, warum man nicht durch Umschalten zwischen verschiedenen Stilen wechseln kann, wenn ich nicht etwas falsch verstehe.

Es ist ein bisschen fummelig machen komplexe Filter in Snap, aber wenn Sie nur aus regulären Svg Markup, können Sie es verwenden, indem Sie entweder die Svg Markup "Parsing" oder einige, die bereits in einer Defs-Anweisung für Beispiel.

ZB könnten Sie zu einer Seite wie dieser gehen ... filter codepen Ergreifen Sie das erstellte Markup, und fügen Sie es in eine defs-Anweisung ein oder parsen Sie es ('markup').

Dann können Sie es verwenden, wie ...

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

zB jsfiddle geschaffen, um die oben codepen verwenden und nur in eine ‚defs‘ Anweisung eingefügt und mit über die Linie verwendet.