是否可以在 %
中设置 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>
最佳答案
保罗和罗伯特的意思如下:
<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>
关于css - SVG 过滤器 feGaussianBlur 百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27103419/