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

Beitrag lesen

SELF-Forum

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

spunky
– Informationen zu den Bewertungsregeln

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