svg模糊過濾器創建外部輝光不工作

Question

我努力在svg <rect>元素上創建外部輝光。我有一個頂部<rect>這是白色，並在它下面，我想申請<feGaussianBlur>藍色<rect>，使頂部白色<rect>外觀，它是發藍。我一直無法得到渲染模糊。我錯過了什麼？

<svg version="1.1" id="takeaway" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 432 2663.8" xml:space="preserve">  
 
    <style><![CDATA[ 
 
    .card {fill:#fff;} 
 
    .card_glowSource{fill:#3361bd;filter:url(#cardGlowSource);} 
 
    ]]></style> 
 
    <defs> 
 
    <filter id="cardGlowSouce" x="0" y="0" width="375" height="140"> 
 
      <feGaussianBlur stdDeviation="3" in="SourceGraphic"/> 
 
    </filter>  
 
</defs> 
 
    <g id="glowRect" transform="matrix(1,0,0,1,30,190)"> 
 
    <rect class="card_glowSource" x="0" y="0" width="375" height="140" rx="5" ry="5"/> \t 
 
\t <rect class="card" x="0" y="0" width="375" height="140" rx="5" ry="5"/> 
 
</g> 
 
</svg>

Answer 1

你有兩個問題：

1. 沒有在你的過濾器名稱拼寫錯誤。 「cardGlowSouce」應該是「cardGlowSource」。
2. 如果您希望過濾器正常工作，您需要從<filter>元素中刪除x，y，寬度和高度屬性。

Answer 2

您不需要兩個形狀，過濾器可以處理模糊，重新着色模糊，並將原始形狀放在模糊的頂部。

由於保羅筆記，你有一個錯字，並且你正在設置過濾器區域的大小與形狀相同 - 這意味着你正在剪裁你的模糊到你的形狀 - 所以...沒有發光在你的形狀之外。

下面是一個過濾器的例子，它以更優雅的方式做你想做的事。

<svg version="1.1" id="takeaway" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 432 2663.8" xml:space="preserve">  
 
    <style><![CDATA[ 
 
    .card {fill:#fff;filter:url(#cardGlow);} 
 
    ]]></style> 
 
    <defs> 
 
    <filter id="cardGlow" primitiveUnits="userSpaceOnUse"> 
 
      <feGaussianBlur stdDeviation="3" in="SourceGraphic"/> 
 
      <feColorMatrix type="matrix" values="0 0 0 0 .12 
 
               0 0 0 0 .23 
 
               0 0 0 0 .75 
 
               0 0 0 1 0"/> 
 
    <feComposite operator="over" in="SourceGraphic"/> 
 
    </filter>  
 
</defs> 
 
    <g id="glowRect" transform="matrix(1,0,0,1,30,190)"> \t 
 
\t <rect class="card" x="0" y="0" width="375" height="140" /> 
 
</g> 
 
</svg>