Come posso creare un "bagliore" attorno a un rettangolo con svg?

Question

ho qualcosa di simile alla seguente:

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

vorrei creare un bagliore bianco intorno a questo.

C'è un modo che posso fare questo in svg. Mi sono guardato intorno e tutto quello che riesco a trovare è "ombra" che non è proprio quello che cerco, perché voglio un'ombra (bagliore) attorno a tutti e quattro i lati del rettangolo.

Answer 1

Prova questa:

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

ho creato il filtro originale in Inkscape, ma funziona altrettanto bene su ciò che è applicato a.

Answer 2

Qui ci sono alcuni filtri che offrono diversi tipi di effetti:

• ombra di goccia (ombra trasparente nero con un leggero offset)
• nero bagliore (con un colore fisso)
• oggetto color glow (prende il colore dell'oggetto a cui è applicato un)

un esempio:

C'è uno demo here.

Il codice:

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

matrici di colore non può davvero essere usato per fare le cose bagliore di un colore diverso, a trasformare solo il colore esistente in qualche modo.

Ma possiamo fare qualcosa di simile, invece ...

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

Vedi this fiddle ho fatto, sulla base di Drew's answer.

Ecco una ripartizione di ciò che il filtro fa:

• Combina un diluvio riempire con la fonte di colorare in (feFlood e feComposite).
• Visualizzare completo oggetto colorato un po '(feMorphology con operator="dilate")
• applicare il nostro buon effetto sfocatura vecchio per farlo brillare! (feGaussianBlur)
• Stick questo colore, espanso, oggetto glowy sotto la fonte (feMerge)

Answer 4

Se si utilizza un filtro di sfocatura, esercitare un po 'di cautela. Blur in particolare può essere costoso in termini di risorse della CPU. Pertanto, potrebbe consumare la batteria più velocemente. Utilizza uno strumento (ad es. OS X Activity Monitor) per osservare l'effetto dei tuoi filtri, specialmente se sono coinvolti animazioni o video.