SVG 过滤器 feGaussianBlur 百分比

Question

是否可以将feGaussianBlur设置为% ？

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

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

Answer 1

保罗和罗伯特的意思如下：

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

Answer 2

SVG 规范说只允许使用数字，但如果您使用objectBoundingBox，则数字实际上是对象大小的百分比。 SVG 规范中有一个 filterPrimitiveUnits 的例子