如何用svg在矩形周圍創建「發光」？

我有類似如下：如何用svg在矩形周圍創建「發光」？

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

我想創建一個圍繞這個白色的光芒。

有什麼方法可以在svg中做到這一點。我環顧四周，所有我能找到的都是「陰影」，這並不是我正在尋找的東西，因爲我想要在矩形的所有四邊都有陰影（發光）。

來源

2012-03-09 Jessica

是否爲您添加2個陰影選項？一個用於右和底，另一個用於頂部和左側？ – Matijs 2012-03-09 06:49:19

http://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3 – 2012-03-09 06:52:11

感謝您的建議。問題是我看不到如何創建一個白色陰影。我在創造黑色而非白色方面取得了很多成功。 – Jessica 2012-03-09 07:25:51

試試這個：

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

我Inkscape創建的原始過濾器，但它的作品一樣好就什麼它的應用。

來源

2012-03-10 23:17:12 robertc

是 - 只需在Inkscape中獲取所需的過濾器，然後單擊編輯 - > XML編輯器... – halfer 2012-03-11 15:27:59

提及Inkscape的+1。我嘗試了提供的svg，但它不起作用，雖然 – Mzn 2013-06-08 12:43:54

下面是一些濾波器，其提供不同類型的效應：

陰影（略有透明的黑色陰影偏移）
黑色輝光（具有固定的顏色）
對象色的輝光（拍攝對象的顏色以被一個施加的話）

一個例子：

有一個demo here。

代碼：

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

來源

2013-10-31 11:02:37

彩色矩陣不能真正用來做的東西煥發出不同的顏色，只有改變現有的顏色以某種方式。

但是，我們可以做這樣的事情，而不是...

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

見this fiddle我做好的基礎上Drew's answer。

這裏的過濾器做什麼故障：

聯合洪水填充源上色它（feFlood和feComposite）。
擴大這個有色物體一點點（feMorphology與operator="dilate"）
應用我們良好的老模糊效果，使其發光！（feGaussianBlur）
棒這種有色，擴大，發光效果源（feMerge）

來源

2016-04-12 06:11:05 Jack

如果rect的填充使用像「rgba（3,3,3,0.9）」這樣的alpha通道，陰影修改了矩形的顏色。有沒有辦法可以避免這種情況？ – user3526 2016-04-12 20:44:39

您可以添加另一個「feComposite」步驟來擺脫原始對象下方發光的任何像素。我讓你一個小提琴:) https://jsfiddle.net/4nz8o1p8/ – Jack 2016-04-13 00:34:02

將鼠標懸停在該小提琴的對象上應用發光 - 你會看到他們的顏色不會改變:) – Jack 2016-04-13 00:40:51

-1

如果您使用的是模糊濾鏡下的對象，行使有點謹慎。特別是在CPU資源方面，模糊成本可能很高。因此它也可能更快耗電。使用工具（例如OS X活動監視器）觀察過濾器的效果，特別是在涉及動畫或視頻時。

來源

2017-11-12 04:55:54

如何用svg在矩形周圍創建「發光」？

回答

相關問題