Question

我正努力在svg <rect>元素上创造外部光晕。我有一个顶部<rect>是白色的，在它下方，我想将<feGaussianBlur>应用于蓝色<rect>，以便顶部白色<rect>具有外观是发光的蓝色。我一直无法渲染模糊效果。我错过了什么？

＆＃13;

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

＆＃13;

Answer 1

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

正如保罗指出的那样，你有一个拼写错误，而且你也要将滤镜区域设置为与形状相同的尺寸 - 这意味着你将模糊剪裁成你的形状 - 所以......你的形状之外没有光晕。

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

＆＃13;

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

＆＃13;

Answer 2

您有两个问题：

您的过滤器名称中有一个拼写错误。＆＃34; cardGlowSouce＆＃34;应该是＆＃34; cardGlowSource＆＃34;。
如果您希望过滤器正常工作，则需要从<filter>元素中删除x，y，width和height属性。

svg模糊滤镜创建外部发光不起作用

2 个答案: