SVG: kein glow-Effekt bei horizontaler Linie, warum?
spunky
SVG: kein glow-Effekt bei horizontaler Linie, warum?
spunky
Matthias ScharwiesHallo,
Ich möchte eine SVG-Linie mit fließendem und leuchtendem Effekt erstellen. Dies funktioniert auch für Pfadlinien, aber nicht für horizontale oder vertikale Linien. Sobald ich den Filter (filter: url(#glow)") in den letzten beiden Linien hinzufüge, werden die Linien nicht mehr angezeigt. Wie kann man das Problem lösen?
Hat jemand eine andere oder bessere Idee für einen Fließ- und Glüheffekt?
Danke.
<html style="margin: 0; background: #000;"><body>
<svg viewBox="0 0 600 600" stroke-linecap="round" fill-opacity="0">
<defs>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<fegaussianblur class="blur" result="coloredBlur" stddeviation="5"></fegaussianblur>
<femerge>
<femergenode in="coloredBlur"></femergenode>
<femergenode in="coloredBlur"></femergenode>
<femergenode in="coloredBlur"></femergenode>
<femergenode in="SourceGraphic"></femergenode>
</femerge>
</filter>
</defs>
/* sinus */
<g class="svgWrapper" transform="translate(300,275)">
<path id="svgWrapper1" class="exampleGlow" d="M100,250 C200,0 300,500 400,250" stroke-width=15 stroke=#800 stroke-dasharray=0 stroke-dashoffset=100 filter=url(#glow) transform='translate(-250,-200)'/>
</g>
<g class="svgWrapper" transform="translate(300,275)">
<path id="svgWrapper2" class="exampleGlow" d="M100,250 C200,0 300,500 400,250" stroke-width=8 stroke=#f00 stroke-dasharray=50,50 stroke-dashoffset=100 filter=url(#glow) box-shadow=0px transform='translate(-250,-200)' style="animation: move 1.0s linear infinite"/>
</g>
/* horizontal */
<g class="svgWrapper" transform="translate(300,400)">
<path class="exampleGlow" d="M100,250 H400" style="stroke-width: 15; stroke: #008; stroke-dasharray: 0; stroke-dashoffset: 100;" transform="translate(-250,-200)"/>
</g>
<g class="svgWrapper">
<path class="exampleGlow" d="M150,450 H450" style="stroke-width: 8; stroke: #00f; stroke-dasharray: 75 25; stroke-dashoffset: 100; animation: move 2.0s linear infinite; box-shadow: 0px;"/>
</g>
</svg>
<style>
@keyframes move {
100% {stroke-dashoffset: 0;
box-shadow: 0px 0px 50px rgba(255, 255, 255, 1);}
}
@keyframes glow {
from {box-shadow: 0px;}
to {box-shadow: 0px 0px 50px rgba(255, 255, 255, 1);}
}
</style>
</body>
</html>
-
Servus!
Hallo,
Ich möchte eine SVG-Linie mit fließendem und leuchtendem Effekt erstellen. Dies funktioniert auch für Pfadlinien, aber nicht für horizontale oder vertikale Linien. Sobald ich den Filter (filter: url(#glow)") in den letzten beiden Linien hinzufüge, werden die Linien nicht mehr angezeigt. Wie kann man das Problem lösen?
Hat jemand eine andere oder bessere Idee für einen Fließ- und Glüheffekt?
Danke.
<html style="margin: 0; background: #000;"><body> <svg viewBox="0 0 600 600" stroke-linecap="round" fill-opacity="0"></svg>
<style> @keyframes move { 100% {stroke-dashoffset: 0; box-shadow: 0px 0px 50px rgba(255, 255, 255, 1);} }
@keyframes glow { from {box-shadow: 0px;} to {box-shadow: 0px 0px 50px rgba(255, 255, 255, 1);} } </style>
</body> </html>
box-shadow ist für HTML-Elemente; such doch mal bei den CSS-Filter-Eigenschaften nach einem ähnlichen Effekt.
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.-
das untere style-glow hatte ich vergessen zu löschen, das hat nichts mit dem Problem zu tun
@keyframes glow { from {box-shadow: 0px;} to {box-shadow: 0px 0px 50px rgba(255, 255, 255, 1);} }der eigentliche glow-Effekt wird im Abschnitt '<defs><filter...' definiert.
-
Servus!
das untere style-glow hatte ich vergessen zu löschen, das hat nichts mit dem Problem zu tun
Und genau so etwas macht es schwierig, ein Problem ohne Online-Beispiel zu debuggen.
Ich habe mal versucht zu verstehen , was du evtl. willst. Dabei habe ich alle potentiellen Fehlerquellen wie überflüssige CSS-Eigenschaften, CSS-Eigenschaften, die nur in HTML gehen (box-shadow) und alle transformations entfernt.
Hier ist mein Beispiel: glow-Animation_mit_CSS
Ist das ungefähr das, was dir vorschwebte?
der eigentliche glow-Effekt wird im Abschnitt '<defs><filter...' definiert.
Ich habe versucht zu verstehen, was er macht - irgendwie ist da nur der blur von feGaussianBlur sinnvoll.
Herzliche Grüße
Matthias Scharwies
PS: Ignorier @nix - er ist unser Foren-Troll.
-
durch femerge und femergenode wird der glow-effekt nochmal verstärkt.
das kann man hier schnell mal testen, wer will: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default_default
aber gut, scheinbar geht es nicht so einfach, ich schau mich weiter um, danke soweit.
😀
-
Umschauen? Unsichtbares wird auch dabei nicht sichtbar. Und unsichtbar wird vieles, wenn man ihm jegliche Farbe nimmt.
Oder geht es mittlerweile (und unbemerkt) gar nicht mehr darum, daß ein Nichts keine Schatten wirft?
-
Servus!
Umschauen? Unsichtbares wird auch dabei nicht sichtbar. Und unsichtbar wird vieles, wenn man ihm jegliche Farbe nimmt.
Oder geht es mittlerweile (und unbemerkt) gar nicht mehr darum, daß ein Nichts keine Schatten wirft?
Das weiß nur spunky.
Ich hatte versucht, ihn sanft darauf hinzustubsen, dasss ein glow für mich nicht
- nicht aus einem feGaussianBlur besteht, der weichzeichnet, sondern
- Glanz eben heller als das Objekt nach außen strahlt.
Das hätte ich mit einem Schlagschatten in hellerer Farbe als das Objekt realisiert. Das Beispiel habe ich ja angelegt, es sollte aber nicht nur im Filter-Tutorial, sondern auch im Path-Tutorial seinen Platz finden.
Nächstes Problem war die (ungewollte) Füllung der Sinuskurve: das fällt bei schwarzem Hintergrund nicht auf - ein Schlagschatten legt sich aber nicht um die Kontur, sondern um die Füllung, da hilft im Bsp. ein
fill: none;im CSS.Was man stärker propagieren müsste, wären die CSS-Filter-Funktionen, die den SVG-Algorithmus benutzen und imho einfacher als box- und text-shadow bzw. die XML-Filter-Monster sind.
ToDo: Ich habe mal alles, was an Referenz erinnert, in diese Referenz-Artikel kopiert:
Das Tutorial
sollte gute Beispiele zeigen und von einfachen Linien aus
- den Unterschied von absoluten und relaitven Pfadkommandos zeigen. ✔
- die Wirkung von Z bei Füllungen und Randlinien zeigen ✔
- Bei Bögen und Kurven zeigen, was ohne
fill: none;passiert. - CSS-Animationen, bzw. Pfad-Animationen mit SMIL und d:path( ) zeigen und die Browserunterstützung thematisieren.
- bei Bögen und Kurven mehr mit Generatoren arbeiten, anstatt viele Minimalbeispiele zu zeigen
Das werde ich aber nicht heute und auch nicht morgen schaffen.
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.
-
-
-
-
-
-
Es steht zwar geschrieben, daß da, wo Licht ist, auch Schatten wäre. Jedoch ist es wohl ein Stück Zen, hört man oder hört man nicht die eine Hand? Sieht man oder sieht man nicht, den Schatten von Nichts?. Gut, von mir aus: jenen von von
none.Lucky Luke mag seinen Schatten zwar überlisten können (ähnlich dem Schrammel, nur anders herum), aber los wird er ihn dann auch erst im Dunkeln. Und selbst der Schrammel … könnte als Raumpilot den ja dann doch (weitgehend) los werden?
-
Guten Morgen,
Ich habe mal alles, was an Referenz erinnert, in diese Referenz-Artikel kopiert:
Das Tutorial
sollte gute Beispiele zeigen und von einfachen Linien aus bis hin zu komplexen Formen gehen.
Dabei sollte ein Tutorial mit Beispielen arbeiten und alles wichtige erklären, bzw. klar kennzeichnen, was benötigtes Vorwissen ist und dann darauf verlinken - ohne es immer wieder zu erklären.
1. den Unterschied von absoluten und relativen Werten zeigen. ✔
Könntet ihr euch das mal durchlesen?
Die Kontrolllinien und -punkte sind - anders als in der Spec - als Markierungen angelegt und nicht erklärt, aber verlinkt.
Anstelle der SELF-Farben im CSS, was einen Denkschritt von der id zur Farbe erforderte, habe ich jetzt
strokeals XML-Attribut mit den Farbnamen blue, gold, red verwendet.#eins { stroke: #dfac20; }Die Spec verwendet bei relativen Kommandos die Variable
dx, um die Verschiebung zu betonen. Sollen wir das auch machen?M x,y m dx,dy2. die Wirkung von Z bei Füllungen und Randlinien zeigen ✔
{{LiveBeispiel}} sieht geil aus, finde ich!
Ist das gold da zu grell?
Soll ich in der Mitte des 4 Einheiten breiten strokes weiß gestrichelte Hilfslinien einzeichnen? Das würde die Zahle der SVG-Elemente verdoppeln, bei einer (im Tut. vorgeschlagenen) Änderung aber visualisieren, wo der stroke liegt. 😉
3. Bei Bögen und Kurven zeigen, was ohne
fill: none;passiert.Ich bin bis zu den Bézier-Kurven gekommen.
Hier zeigt sich ein weiterer Mangel unserer statischen Live-Beispiele: wenn man eine Bézier-Kurve im Frickl ändert, bleiben die Kontrolllinien auf der ursprünglichen Position. Da hilft nur ein …
5. bei Bögen und Kurven mehr mit Generatoren arbeiten, anstatt viele Minimalbeispiele zu zeigen
Den mach ich irgendwann …
4. CSS-Animationen, bzw. Pfad-Animationen mit SMIL und d:path( ) zeigen und die Browserunterstützung thematisieren.
Ich bin mir nicht sicher, welche Anwendungsbeispiele man in diesem Tutorial zeigen sollte, oder ob man dort nicht mit mehreren Cards unter "Siehe auch" auf andere Tutorials verweist.
SVG/Tutorials/Shape-Morphing
Ursprünglich aus 2015 - vor 3 Jahren ergänzt, heute mit 99% Unterstützung von clip-path und prefers-reduced-motion wieder renovierungsbedürftig gewesen.
{{LiveBeispiel}} - habe ich schon mal gesagt, dass das geil ist? Danke @Rolf B
Damit ist das Problem der mangelnden SMIL-Unterstützung des Frickl umgangen.
Beispiele, die ich so eingebunden habe, benötigen keine h1 mehr. ~
Evtl. sollte man sich auch mal das Grundlayout erneut anschauen. Bei Mimimalbeispielen benötigt man imho kein border für svg.~ Das ist in der Beispiel -Vorlage drin:.tabbed .live-view {border: 1px solid #ddd;}Ich frage euch das alles am 06.03 am Stammtisch!
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.