it-swarm.com.de

Wie kann ich mit svg ein "Glühen" um ein Rechteck erzeugen?

Ich habe so etwas wie folgendes:

<svg id="svgLogo1" style="left:0; top:0; position:absolute"
        width="980" height="80" viewBox="0 0 980 80" 
        xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="5" width="980" height="54" rx="6" ry="6" 
            style="stroke-width:2; xstroke:#FFF; fill:#555"/>
</svg>

Darum möchte ich ein weißes Leuchten erzeugen.

Gibt es eine Möglichkeit, dass ich dies in Svg tun kann. Ich habe mich umgesehen und alles, was ich finden kann, ist "Schatten", was nicht wirklich das ist, wonach ich suche, da ich einen Schatten (Glow) um alle vier Seiten des Rechtecks ​​haben möchte.

22
Jessica

Hier sind einige Filter, die verschiedene Arten von Effekten bieten:

  • Schlagschatten (transparenter schwarzer Schatten mit leichtem Versatz)
  • Schwarzes Leuchten (mit fester Farbe)
  • Objektfarbenes Leuchten (nimmt die Farbe des Objekts an, auf das es angewendet wird)

Ein Beispiel:

Es gibt eine Demo hier .

Der Code:

<!-- a transparent grey drop-shadow that blends with the background colour -->
<filter id="shadow" width="1.5" height="1.5" x="-.25" y="-.25">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/>
    <feColorMatrix result="bluralpha" type="matrix" values=
            "1 0 0 0   0
             0 1 0 0   0
             0 0 1 0   0
             0 0 0 0.4 0 "/>
    <feOffset in="bluralpha" dx="3" dy="3" result="offsetBlur"/>
    <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

<!-- a transparent grey glow with no offset -->
<filter id="black-glow">
    <feColorMatrix type="matrix" values=
                "0 0 0 0   0
                 0 0 0 0   0
                 0 0 0 0   0
                 0 0 0 0.7 0"/>
    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

<!-- a transparent glow that takes on the colour of the object it's applied to -->
<filter id="glow">
    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>
47
Drew Noakes

Farbmatrizen können nicht wirklich dazu verwendet werden, Dinge in einer anderen Farbe zum Leuchten zu bringen, sondern nur die vorhandene Farbe auf irgendeine Weise zu transformieren.

Aber so etwas können wir stattdessen tun ...

<filter id="white-glow">
    <feFlood result="flood" flood-color="#ffffff" flood-opacity="1"></feFlood>
    <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
    <feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
    <feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
    <feMerge>
        <feMergeNode in="blurred"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>

Siehe diese Geige Ich habe gemacht, basierend auf Drews Antwort .

Hier ist eine Zusammenfassung der Funktionen des Filters:

  • Kombinieren Sie eine Flutfüllung mit der Quelle, um sie einzufärben (feFlood und feComposite).
  • Dieses farbige Objekt etwas erweitern (feMorphology mit operator="dilate")
  • Wenden Sie unseren guten alten Unschärfe-Effekt an, um ihn zum Leuchten zu bringen! (feGaussianBlur)
  • Klebe dieses farbige, erweiterte, leuchtende Objekt unter die Quelle (feMerge)
12
Jack

Versuche dies:

<svg id="svgLogo1" style="left: 0px; top: 0px;
  position: absolute;" width="980" height="80" viewBox="0 0 980 80"
  xmlns="http://www.w3.org/2000/svg" version="1.1" >
    <defs>
        <filter id="dropGlow" width="1.5" height="1.5" x="-.25" y="-.25">
            <feGaussianBlur id="feGaussianBlur5384" in="SourceAlpha" stdDeviation="15.000000" result="blur"/>
            <feColorMatrix id="feColorMatrix5386" result="bluralpha" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 0.800000 0 "/>
            <feOffset id="feOffset5388" in="bluralpha" dx="0.000000" dy="0.000000" result="offsetBlur"/>
            <feMerge id="feMerge5390">
                <feMergeNode id="feMergeNode5392" in="offsetBlur"/>
                <feMergeNode id="feMergeNode5394" in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <rect x="0" y="5" width="980" height="54" rx="6" ry="6"
        style="stroke-width: 2; xstroke: #FFFFFF; fill: #555555; filter:url(#dropGlow)"/>
</svg>

Ich habe den ursprünglichen Filter in Inkscape erstellt, aber er funktioniert genauso gut auf was er angewendet wird.

8
robertc

Wenn Sie einen Unschärfefilter verwenden, seien Sie vorsichtig. Unschärfe kann insbesondere in Bezug auf die CPU-Ressourcen teuer sein. Daher kann der Akku auch schneller verbraucht werden. Verwenden Sie ein Tool (z. B. den OS X Activity Monitor), um die Auswirkungen Ihrer Filter zu beobachten, insbesondere wenn es sich um Animationen oder Videos handelt.

0
Marlin Ouverson