SVG过滤器feGaussianBlur的百分比

时间:2014-11-24 11:08:30

标签: css svg shadow svg-filters

是否可以在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>

2 个答案:

答案 0 :(得分:4)

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

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

答案 1 :(得分:3)

SVG specification表示只允许使用数字,但如果使用objectBoundingBox,则该数字实际上是对象大小的百分比。 There's an example of filterPrimitiveUnits in the SVG specification