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

您不需要两个形状，过滤器可以处理模糊，重新着色模糊，并将原始形状放在模糊之上。

正如paul所指出的，你有一个打字错误，而且你正在将滤镜区域设置为与形状相同的大小——这意味着你正在将模糊剪裁到你的形状——所以……在你的形状之外没有光晕。

下面是一个过滤器的例子，它可以以更优雅的方式满足您的需求。

<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"应为"cardGlowsSource"
2. 如果希望过滤器正常工作，则需要从<filter>元素中删除x、y、width和height属性