Matthias Scharwies: SVG: kein glow-Effekt bei horizontaler Linie, warum?

Beitrag lesen

SELF-Forum

SVG: kein glow-Effekt bei horizontaler Linie, warum?

Matthias Scharwies
– Informationen zu den Bewertungsregeln

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.
Beitrag melden
–
Informationen zu den Bewertungsregeln