我想在透明的 SVG 元素上添加阴影。
我尝试过使用各种不同类型的过滤器,但没有效果。 svg 元素上的 css3 过滤器(filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));
),新的投影滤镜(<feDropShadow>
),旧过滤器:
<filter xmlns="http://www.w3.org/2000/svg" id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
这可以使用 css3 box-shadow 来实现Codepen https://codepen.io/villagelukaschen/pen/KEEavR
我希望在透明元素上有阴影,但实际的透明元素会夹在阴影上(因此元素本身是透明的,但具有类似霓虹灯的外发光)
我希望能够控制:
任何帮助将不胜感激 :)
如果原始形状是完全透明的形状(由于某些原因),则无法执行此操作,但是您可以从几乎完全透明的原始形状开始执行此操作,最终得到由正常投影包围的完全透明形状。
使用 1% 填充不透明度绘制形状。当您将它们拉入滤镜时,使用颜色矩阵将它们的 alpha 乘以 100 - 并将其用作投影的基础。您最终不会在最终版本中使用原始的 1% 不透明度形状,因为如果您使用“out”运算符 - 这会丢弃与原始(处理后的)形状重叠的任何内容。
svg {
background: #33D;
}
<svg width="500px" height="400px">
<defs>
<filter id="trans-shadow">
<feColorMatrix type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 100 0"
result="boostedInput"/>
<feGaussianBlur stdDeviation="5"/>
<feComposite operator="out" in2="boostedInput"/>
</filter>
</defs>
<circle filter="url(#trans-shadow)" x="100" y="100" r="050" cx="150" cy="150" fill="black" fill-opacity="0.01" />
</svg>
我假设这些形状并不总是带有阴影,因此您希望它们的非阴影版本尽可能透明。如果这些形状是never如果显示时没有阴影,那么您可以跳过一个步骤,只需将这些形状最初绘制为黑色,然后仍然使用“out”来丢弃它们。就像这样:
svg {
background: #33D;
}
<svg width="500px" height="400px">
<defs>
<filter id="trans-shadow">
<feGaussianBlur stdDeviation="5"/>
<feComposite operator="out" in2="SourceGraphic"/>
</filter>
</defs>
<circle filter="url(#trans-shadow)" x="100" y="100" r="050" cx="150" cy="150" fill="black" />
</svg>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)