code - svg html

¿Cómo puedo crear un "resplandor" alrededor de un rectángulo con svg?

Question

Tengo algo como lo siguiente:

<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>

Me gustaría crear un brillo blanco alrededor de esto.

¿Hay alguna manera de que pueda hacer esto en svg. Miré a mi alrededor y todo lo que puedo encontrar es "sombra", que no es realmente lo que estoy buscando, ya que quiero una sombra (Resplandor) alrededor de los cuatro lados del rectángulo.

Answer 1

Aquí hay algunos filtros que proporcionan diferentes tipos de efectos:

• Sombra (sombra negra transparente con ligero desplazamiento)
• Resplandor negro (con un color fijo)
• Resplandor del color del objeto (toma el color del objeto al que se aplica)

Un ejemplo:

Aquí hay una demostración .

El código:

<!-- 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>

Answer 2

Las matrices de color no se pueden usar realmente para hacer que las cosas brillen de un color diferente, solo transforman el color existente de alguna manera.

Pero podemos hacer algo como esto en su lugar ...

<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>

Mira este violín que hice, basado en la respuesta de Drew .

Aquí hay un desglose de lo que hace el filtro:

• Combine un relleno de inundación con la fuente para colorearlo ( feFlood y feComposite ).
• Expande un poco este objeto de color ( feMorphology with operator="dilate" )
• ¡Aplica nuestro buen efecto borroso para que brille! ( feGaussianBlur )
• Pegue este objeto coloreado, expandido y brillante debajo de la fuente ( feMerge )

Answer 3

Prueba esto:

<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>

Creé el filtro original en Inkscape , pero funciona igual de bien en lo que se aplique.

Answer 4

Si está utilizando un filtro de desenfoque, tenga cuidado. El desenfoque en particular puede ser costoso en términos de recursos de CPU. Por lo tanto, puede consumir la batería más rápido, también. Use una herramienta (por ejemplo, el Monitor de actividad OS X) para observar el efecto que tienen sus filtros, especialmente si se trata de animaciones o videos.