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"/>	
	<rect class="card" x="0" y="0" width="375" height="140" rx="5" ry="5"/>
</g>
</svg>

Answer 1

您不需要两个形状，一个滤镜可以处理模糊、重新着色模糊以及将原始形状置于模糊之上。

正如保罗所说，您有一个错字，并且您将过滤器区域设置为与形状相同的大小 - 这意味着您正在将模糊剪裁到您的形状 - 所以......在您的形状之外没有发光。

下面是一个过滤器示例，它以更优雅的方式执行您想要的操作。

<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)">	
	<rect class="card" x="0" y="0" width="375" height="140" />
</g>
</svg>

Answer 2

你有两个问题：

1. 您的过滤器名称中有错字。 “cardGlowSouce”应该是“cardGlowSource”。
2. 如果您希望过滤器正常工作，您需要从 <filter> 元素中删除 x、y、宽度和高度属性。