SVG:一个过滤器中的多种效果 [英] SVG: Multiple Effects in One Filter
问题描述
我正在尝试在单个 SVG 过滤器中实现多个阴影,但我相信我的问题比这更通用:如何将多个效果添加到单个 SVG 过滤器中?在我的案例,这就是我想要做的.
I'm trying to implement multiple drop shadows into a single SVG filter, but I believe my question is more generic than that: how can I add multiple effects into a single SVG filter? In my case, here's specifically what I'm trying to do.
我有一个当前包含单个路径元素的 SVG 文档,并且我对这个路径元素应用了一个阴影效果.
I've got an SVG document that currently contains a single path element, and I've applied a single drop shadow effect to this path element.
我的 SVG 文档
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="1440" height="1750">
<defs>
<filter id="dropshadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2.2"></feGaussianBlur>
<feOffset dx="12" dy="12" result="offsetblur"></feOffset>
<feFlood flood-color="rgba(0,0,0,0.5)"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<path xmlns:xlink="http://www.w3.org/1999/xlink" d="M 100 100 L 300 100 L 200 300 z z" fill="#2DA9D6" filter="url(#dropshadow)"></path>
</svg>
这给了我一个看起来像这样的 SVG:
Which gives me an SVG that looks like this:
现在,我想向同一个路径元素添加第二个(完全不同的)投影.例如,假设有一个向上和向左移动的阴影.在 CSS 中,我的整个阴影可能如下所示:
Now, I want to add a second (completely different) drop shadow to this same path element. For example, let's say a drop shadow that goes up and to the left of the element. In CSS my whole dropshadow might look like:
box-shadow: 5px 5px 5px rgba(0,0,0,0.5), -5px -5px 5px rgba(0,0,0,0.5);
如何使用 SVG 滤镜制作这些多个阴影?我看过这个问题,它建议放置多种效果合并到一个过滤器中,但我不确定如何将多个效果合并到一个过滤器中.
How can I do these multiple shadows with SVG filters? I've had a look at this question which suggests putting multiple effects into one filter, but I'm not sure how to merge multiple effects into one filter.
感谢您的帮助!
推荐答案
您可以使用 result
属性为过滤器原语元素的输出命名,将其视为一种过滤器-本地 id
属性.然后,您可以将该名称用作带有 in
或 in2
属性的过滤器输入.
You can use the result
attributes to give a name to a filter primitive element's output, think of it as a sort of filter-local id
attribute. You can then use that name as filter input with the in
or in2
attributes.
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="1440" height="1750">
<defs>
<filter id="dropshadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
<feOffset dx="12" dy="12" result="offsetblur"/>
<feOffset dx="-20" dy="-12" result="offsetblur2" in="blur"/>
<feComponentTransfer result="shadow1" in="offsetblur">
<feFuncA type="linear" slope="0.5"/>
</feComponentTransfer>
<feComponentTransfer result="shadow2" in="offsetblur2">
<feFuncA type="linear" slope="0.2"/>
</feComponentTransfer>
<feMerge>
<feMergeNode in="shadow1"/>
<feMergeNode in="shadow2"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path xmlns:xlink="http://www.w3.org/1999/xlink" d="M 100 100 L 300 100 L 200 300 z z" fill="#2DA9D6" filter="url(#dropshadow)"></path>
</svg>
参见fiddle.
这篇关于SVG:一个过滤器中的多种效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!