Langer Schatteneffekt in SVG für Web

Grundsätzlich frage ich mich, ob jemand eine Idee hat, wie man mit einem SVG: Beispielbild effizient einen langen Schatteneffekt erzielt

Meine drei Ideen, wie das möglich sein könnte:

Hella detaillierte Verlaufskarte, aber gibt es eine webkompatible Möglichkeit, diese aus Illustrator in SVG zu exportieren? Blend Object SVG-Filter, den ich nicht kenne? JS-Lösung mit so etwas wie SNAP SVG? Meine vorübergehende Lösung bestand darin, jedes Puzzleteil aus Illustrator mit 75 Ebenen von SVG-Pfaden zu exportieren, die den Schatten bilden. Das Problem mit so vielen Ebenen ist, dass es das Browser-Rendering wirklich belastet. Hier ist ein Beispiel

Ich habe das use-Element bereits verwendet, aber ein symbol-Element mit allen 75 Schattenpfaden aufgerufen.

In der ursprünglichen AI-Datei wird der Effekt mit dem Mischmodus erstellt, für den ich nach einigem Googeln keinen entsprechenden SVG-Filter finden konnte ... aber vielleicht fehlt mir etwas.

Ich habe versucht herauszufinden, wie ich es mit einem einzigen Pfad und Gradienten machen soll, aber wegen des "Schichteffekts" wäre es nicht linear, also müsste ich es wirklich kartieren und wusste nicht, ob es einen gibt einfache Möglichkeit, das zu tun.

Danke für Ihre Hilfe!

CSS-Mischmodi befinden sich noch in einem frühen Stadium, könnten aber eine Möglichkeit sein. Ich bin neugierig, warum Sie 75 Schichten benötigen. Ich würde denken, dass so etwas nur 2 * die Anzahl der Teile benötigt. Ich bin mir ziemlich sicher, dass Sie die Hover-Effekte für einzelne Teile nicht erhalten konnten, wenn Sie einen Pfad verwendeten
Versuchen Sie diesen Link
... auch hier ist ein weiteres Beispiel / Ansatz, mit dem Sie experimentieren könnten [ broken-links.com/2013/11/20/cross-browser-filters-css-svg/] Ich hoffe, das hilft Ihnen , Prost

Antworten (2)

Ich habe CSS-Beispiele gesehen, bei denen mehrere Schlagschatten mit unterschiedlichen Offsets und Farben verwendet werden (normalerweise mit box-shadow). Sie könnten dasselbe mit Schatten in einem SVG tun.

Hier ist ein CSS-Beispiel: http://www.sandbox.juan-i.com/longshadows/

Viele Schatten sind schlecht für die Leistung, seien Sie also vorsichtig.

Dieselbe Schattentechnik kann in Illustrator verwendet werden, da Illustrator auch mehrere Schatten haben kann. Eine bessere Option ist wahrscheinlich die Verwendung von Blend Toolin Illustrator, um viele Zwischenformen zu erstellen, was für so etwas gut ist.

Weitere Informationen: http://design.tutsplus.com/tutorials/illustrators-blend-tool-a-comprehensive-guide--vector-551

Hier ist ein Beispiel mit der Blend Tool.

Geben Sie hier die Bildbeschreibung ein

Die schlechte Nachricht ist, dass Sie dies nur in einem SVG rendern können, indem Sie Object→ Expand Appearanceund Object→ verwenden Expand, um die Mischung in separate Pfade umzuwandeln.

Geben Sie hier die Bildbeschreibung ein

Und in puncto Leistung sind Sie wieder am Start.

Eine weitere Option besteht darin, ein Bitmap-Bild für Ihre langen Schattenelemente zu verwenden. Auf diese Weise werden sie schön und leistungsfähig sein.

Sie können SVG-Filter verwenden. Ich bin mir nur nicht sicher, ob es in Bezug auf die Geschwindigkeit leichter ist. 75 Pfade zu haben ist nichts für den Computer, aber selbst ein paar Filter können den Computer in die Knie zwingen. (Dies ist stark von der Implementierung abhängig.)

Hier ist eine Möglichkeit (10 px langer Schatten):

<filter id="Long_Shadow_10" >
    <feConvolveMatrix order="20"  in="SourceAlpha" result ="conv_out"
        kernelMatrix=" 
            1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1
            " />
</filter>

Jetzt müssen Sie es noch mit einem Begrenzungsvolumen maskieren. Nicht sehr praktisch aber funktioniert. (Möglicherweise müssen Sie vor dem Weichzeichnen usw. erweitern.) Größere Kernelspalten, längerer Schatten, langsamere Leistung.

Beispiel Ergebnis

Bild 1 : Ergebnis eines 20 px gerichteten Schattens.

Die letzte Option verwendet Bitmaps, die durch Vektoren maskiert sind. Das geht etwas schneller, da nicht jedes Mal neu berechnet werden muss. Selbst ein Bild mit relativ niedriger Auflösung würde ausreichen, wenn Sie es mit Vektoren maskieren.

Langer Schatteneffekt in SVG für Web
AntwortenHierDatenschutz-Bestimmungen1y, 0v