Colors SVG:阴影的颜色
我想在SVG中编写一个带有红色阴影的简单矩形。 我有一个简单的过滤器:Colors SVG:阴影的颜色,colors,svg,shadow,svg-filters,Colors,Svg,Shadow,Svg Filters,我想在SVG中编写一个带有红色阴影的简单矩形。 我有一个简单的过滤器: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1012" height="400"> <title>svg arrow with dropshadow</title> <desc>An svg example of an arrow shape with a dropshadow filter
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1012" height="400">
<title>svg arrow with dropshadow</title>
<desc>An svg example of an arrow shape with a dropshadow filter applied. The dropshadow filter effect uses feGaussianBlur, feOffset and feMerge.</desc>
<defs>
<filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feComponentTransfer in="SourceAlpha">
<feFuncR type="discrete" tableValues="1"/>
<feFuncG type="discrete" tableValues="0"/>
<feFuncB type="discrete" tableValues="0"/>
</feComponentTransfer>
<feGaussianBlur stdDeviation="2"/>
<feOffset dx="0" dy="0" result="shadow"/>
<feComposite in="SourceGraphic" in2="shadow" operator="over"/>
</filter>
</defs>
<rect rx="2" ry="2" fill="rgb(255,255,255)" x="5.25" y="5.25" width="141" height="50" fill-opacity="0.85" filter="url(#dropshadow)">
</svg>
带dropshadow的svg箭头
应用dropshadow过滤器的箭头形状的svg示例。dropshadow过滤器效果使用feGaussianBlur、feOffset和feMerge。
为什么在本例中阴影颜色不是红色?我的坏朋友在哪里
元素
编辑:在Firefox v7中,我看到了所有的灰度,而在Safari v5中,我根本看不到阴影效果。您的答案很可能是,您正在浏览器/版本中进行测试,但不完全支持SVG过滤器规范。对于那些寻找通用解决方案的人来说,这在元素中对我有效:
<feGaussianBlur in="SourceAlpha" stdDeviation="1.7" result="blur"/>
<feOffset in="blur" dx="3" dy="3" result="offsetBlur"/>
<feFlood flood-color="#3D4574" flood-opacity="0.5" result="offsetColor"/>
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>
您可以将原始过滤器图像与真实图像重叠,以实现它。我就是这样使用的。Safari直到第6版才支持过滤器,请看。我假设它不会产生红色,因为。SourceAlpha->隐式黑色(#000)+alpha。如果将in=“SourceAlpha”
替换为in=“SourceGraphic”
,它在Opera和Chrome中确实可以工作。Firefox的问题是,它曾经有一个bug,无法处理具有单个值的离散feFunc。它可以通过使用两个值来解决,例如tableValues=“1”。这是18个月前修复的。我用这个feFlood和fecomposite得到了很好的结果