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

Question

que tienen 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 resplandor 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 (brillo) alrededor de los cuatro lados del rectángulo.

Answer 1

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 todo lo que se aplica a.

Answer 2

Éstos son algunos filtros que proporcionan diferentes tipos de efectos:

• gota de sombra (shadow negro transparente con un ligero desplazamiento)
• Negro brillo (con un color fijo)
• resplandor de color Objeto (toma el color del objeto al que se aplica una)

un ejemplo:

Hay un demo here.

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 3

matrices de color realmente no pueden ser usados ​​para hacer las cosas brillan un color diferente, sólo se transforma 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> 

Ver this fiddle hice, basado en Drew's answer.

He aquí un desglose de lo que hace el filtro:

• combinar una Rellenar con la fuente de colorearlo (feFlood y feComposite).
• ampliar este objeto de color un poco (feMorphology con operator="dilate")
• aplicar nuestro buen efecto borroso viejo para hacerlo brillar! (feGaussianBlur)
• palillo de esto, ampliado, objeto glowy de color bajo la fuente (feMerge)

Answer 4

Si está utilizando un filtro de desenfoque, ejercer un poco de cautela. La falta de definición en particular puede ser costosa 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 animación o video.