SVG过滤器feGaussianBlur百分比

可以设置feGaussianBlur%？SVG过滤器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>

来源

2014-11-24 user2306309

保罗和罗伯特的含义如下：

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

来源

2014-11-24 19:56:34

非常感谢！ – user2306309 2014-11-25 00:34:56

的SVG specification说，只有数字是允许的，但如果你使用objectBoundingBox数量实际上是对象的大小的百分比。 There's an example of filterPrimitiveUnits in the SVG specification

来源

2014-11-24 11:23:24

当我将objectBoundingBox添加到过滤器时，没有任何事情发生。只有阴影消失。请你给我一个例子。 – user2306309 2014-11-24 11:44:10

Robert表示将primitiveUnits设置为“objectBoundingBox”。即：''。 – 2014-11-24 12:26:55

SVG过滤器feGaussianBlur百分比

回答

相关问题