如何在透明rect svg上添加阴影 [英] How to have a drop shadow on a transparent rect svg
问题描述
我想在透明的SVG元素上添加阴影.
I want to have a drop shadow on a transparent SVG element.
我尝试使用所有不同类型的过滤器,但无济于事.svg元素上的css3滤镜( filter:drop-shadow(0 -6mm 4mm rgb(160,0,210));
),新的dropshadow滤镜(< feDropShadow> 代码>),旧的过滤器:
I have tried using all different kinds of filters but to no avail. css3 filters on the svg element(filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));
), the new dropshadow filter(<feDropShadow>
), the old filters:
<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
This can be achieved using css3 box-shadow Codepen
我希望透明元素上有一个阴影,但实际的透明元素会夹在阴影上(因此元素本身是透明的,但具有像霓虹灯一样的霓虹灯)
I expect to have a dropshadow on a transparent element but the actual transparent element clips over the dropshadow(so the element itself is transparent, but has an neon like outer glow)
我希望能够控制:
- 模糊
- 传播
- 颜色
任何帮助将不胜感激:)
Any help will be appreciated :)
推荐答案
如果原件是完全透明的形状,则不能执行此操作(由于某些原因),但是您可以从几乎完全透明的原件形状开始执行此操作,然后最终呈现出完全透明的形状,并被正常的阴影包围.
You can't do this if the original is a fully transparent shape - because of reasons - but you can do this starting from an almost completely transparent original shape and end up with a fully transparent shape surrounded by a normal drop shadow.
以1%的填充不透明度绘制形状.当您将它们拖入过滤器时,请使用colormatrix将其alpha乘以100-并将其用作阴影的基础.在最终版本中,您最终不会使用原始的1%不透明度形状,因为如果使用"out"运算符-这将丢弃与原始(已处理)形状重叠的任何内容.
Draw your shapes with 1% fill-opacity. When you pull those into a filter, multiply their alpha by 100 using a colormatrix - and use that as the basis for your dropshadow. You won't end up using the original 1% opacity shape in your final version because if you use the "out" operator - this discards the contents of anything that overlaps with the original (processed) shape.
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>
我假设这些形状并非总是阴影,所以您希望它们的非阴影版本尽可能透明.如果这些形状从不显示 且没有阴影,那么您可以跳过一个步骤,只将它们绘制成黑色,而仍然使用"out"将其丢弃.像这样:
I'm assuming that these shapes are not always drop-shadowed, so you want their non drop-shadowed versions to be as transparent as possible. If these shapes are never displayed without a drop-shadow then you can skip a step and just draw these shapes in black originally and still use the "out" to discard them. Like so:
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>
这篇关于如何在透明rect svg上添加阴影的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!