SVG: kein glow-Effekt bei horizontaler Linie, warum? von Matthias Scharwies, 19.02.2024 10:33

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

Matthias Scharwies 19.02.2024 10:33

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.