我想在 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 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>
为什么在这个例子中阴影颜色不是红色?我的坏处在哪里?
最佳答案
对于那些寻找通用解决方案的人来说,这在元素内部对我有用:
<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"/>
关于colors - SVG:阴影的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7965196/