Làm thế nào tôi có thể tạo ra một "ánh sáng" xung quanh một hình chữ nhật với svg?

Question

Tôi có một cái gì đó như sau:

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

Tôi muốn tạo ra một ánh sáng trắng xung quanh này.

Có cách nào để tôi có thể thực hiện điều này trong svg hay không. Tôi nhìn xung quanh và tất cả những gì tôi có thể tìm thấy là "bóng tối" không thực sự là thứ tôi đang tìm kiếm vì tôi muốn có một cái bóng (Glow) xung quanh tất cả bốn mặt của hình chữ nhật.

Answer 1

Hãy thử điều này:

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

Tôi tạo ra các bộ lọc gốc trong Inkscape, nhưng nó hoạt động giống như trên bất cứ điều gì nó được áp dụng.

Answer 2

Dưới đây là một số bộ lọc cung cấp các loại khác nhau của hiệu ứng:

• Drop shadow (bóng trong suốt màu đen với một chút bù đắp)
• Đen ánh sáng (với một màu cố định)
• Object màu sáng (mất màu sắc của đối tượng mà nó là một ứng dụng)

một ví dụ:

Có một số demo here.

Mã:

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

ma trận Màu sắc có thể không thực sự được sử dụng để làm cho mọi việc sáng một màu sắc khác nhau, chỉ thay đổi màu sắc hiện có một cách nào đó.

Nhưng chúng ta có thể làm điều gì đó như thế này thay vì ...

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

Xem this fiddle tôi thực hiện, dựa trên Drew's answer.

Dưới đây là một phân tích về những gì các bộ lọc làm:

• Kết hợp một lũ điền với nguồn để tô màu nó trong (feFlood và feComposite).
• Mở rộng đối tượng màu này một chút (feMorphology với operator="dilate")
• Áp dụng hiệu ứng mờ cũ tốt của chúng tôi để làm cho nó phát sáng! (feGaussianBlur)
• Stick màu, mở rộng, đối tượng dịu mát này theo những nguồn (feMerge)

Answer 4

Nếu bạn đang sử dụng một bộ lọc blur, tập thể dục một chút thận trọng. Blur đặc biệt có thể tốn kém về mặt tài nguyên CPU. Do đó, nó cũng có thể tiêu thụ pin nhanh hơn. Sử dụng công cụ (ví dụ: Màn hình hoạt động OS X) để quan sát hiệu ứng mà bộ lọc của bạn có, đặc biệt nếu hoạt ảnh hoặc video có liên quan.