SVG过滤器feGaussianBlur的百分比

debugcn 发表于 Dev

用户名

可以设置feGaussianBlurin%吗？

我不知道为什么，但这不起作用。

<filter id="drop-shadow"> 
  <feGaussianBlur in="SourceAlpha" stdDeviation="0.09"/>
     <feOffset dx="52%" dy="2%" result="offsetblur"/>
        <feFlood flood-color="#000000"/> 
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge> 
        <feMergeNode/> 
     <feMergeNode in="SourceGraphic"/>
   </feMerge> 
</filter>

迈克尔·穆兰尼（Michael Mullany）

保罗和罗伯特的意思是：

<filter id="drop-shadow" primitiveUnits="objectBoundingBox"> 
  <feGaussianBlur in="SourceAlpha" stdDeviation="0.09"/>
     <feOffset dx="0.52" dy="0.02" result="offsetblur"/>
        <feFlood flood-color="#000000"/> 
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge> 
        <feMergeNode/> 
     <feMergeNode in="SourceGraphic"/>
   </feMerge> 
</filter>

这是一个非常大的模糊，并且以百分比为单位的偏移非常大，因此您将不得不大量扩展滤镜区域。

<svg width="800" height="800">
      <defs>
        <filter id="blurme" primitiveUnits="objectBoundingBox" x="-50%" y="-50%" width="300%" height="200%"> 
         <feGaussianBlur in="SourceAlpha" stdDeviation="0.09"/>
         <feOffset dx="0.52" dy="0.02" result="offsetblur"/>
            <feFlood flood-color="black"/> 
            <feComposite in2="offsetblur" operator="in"/>
            <feMerge> 
            <feMergeNode/> 
            <feMergeNode in="SourceGraphic"/>
       </feMerge> 
    </filter>
      </defs>
      <rect filter="url(#blurme)" x="100" y="100" width="300" height="300" fill="red"/>
    </svg>