SVG：一个过滤器多影响

我试图实现多个阴影到一个单一的SVG滤镜，但我相信我的问题比这更通用的：我怎么可以添加多个影响到一个单一的SVG过滤器？就我而言，这里是我正在尝试做的。SVG：一个过滤器多影响

我已经有了，目前包含了一个路径元素的SVG文档，我申请一个阴影效果路径元素。

我的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：

enter image description here

现在，我想添加第二个（完全不同的）阴影到这个相同的路径元素。例如，让我们说一个上升到元素左侧的阴影。在CSS中，我的整个阴影可能如下所示：

box-shadow: 5px 5px 5px rgba(0,0,0,0.5), -5px -5px 5px rgba(0,0,0,0.5);

如何使用SVG滤镜来实现这些多个阴影？我看了一下this question这表明把多种影响到一个过滤器，但我不知道如何多重效应合并成一个过滤器。

感谢您的帮助！

来源

2014-03-31 Nick Budden

您可以使用result属性为过滤器原始元素的输出提供一个名称，将其视为一种过滤器本地id属性。然后，您可以将该名称用作in或in2属性的过滤器输入。

<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。

来源

2014-03-31 09:05:52

SVG：一个过滤器多影响

回答

相关问题