Jak mogę utworzyć "poświatę" wokół prostokąta za pomocą svg?

Question

Mam coś jak następuje:

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

chciałbym stworzyć białą poświatę wokół tego.

Czy jest jakiś sposób, że mogę to zrobić w svg. Rozejrzałem się wokół i wszystko, co mogę znaleźć, to "cień", który tak naprawdę nie jest tym, czego szukam, ponieważ chcę uzyskać cień (blask) wokół wszystkich czterech boków prostokąta.

Answer 1

Spróbuj tego:

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

I stworzył oryginalny filtr w Inkscape, ale działa równie dobrze na cokolwiek to jest wniosek.

Answer 2

Oto kilka filtrów, które zapewniają różne rodzaje działania:

• Cień (przezroczysty czarny cień z nieznaczne przesunięcie)
• Czarny blask (o stałej koloru)
• Object-kolorowy blask (przyjmuje kolor obiektu, do którego jest stosowany)

przykład:

Istnieje demo here.

Kod:

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

Kolor macierze naprawdę nie można stosować do rzeczy świecić inny kolor, tylko przekształcić istniejącą barwę w jakiś sposób.

Ale możemy zrobić coś takiego zamiast ...

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

Zobacz this fiddle zrobiłem, na podstawie Drew's answer.

Oto podział tego, co robi filtr:

• Kombajny powódź wypełnić źródła do pokolorować go w (feFlood i feComposite).
• Poszerz nieco ten kolorowy obiekt (feMorphology z operator="dilate")
• Zastosuj nasz dobry stary efekt rozmycia, aby był blask! (feGaussianBlur)
• stick to kolorowy, rozszerzone, glowy obiekt pod źródła (feMerge)

Answer 4

Jeśli używasz filtru rozmycia, ćwiczenia trochę ostrożności. Blur w szczególności może być kosztowny pod względem zasobów procesora. Dlatego może również zużywać baterie szybciej. Użyj narzędzia (np. Monitor aktywności OS X), aby obserwować efekt działania filtrów, szczególnie w przypadku animacji lub wideo.