SVG: Несколько эффектов в одном фильтре

Question

Я пытаюсь реализовать несколько теней отбрасывания в один фильтр SVG, но я считаю, что мой вопрос более общий, чем это: Как добавить несколько эффектов в один фильтр SVG? В моем случае, вот конкретно, что я пытаюсь сделать.

У меня есть документ SVG, который в настоящее время содержит один элемент пути, и я применил к этому элементу один эффект тени.

My 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, который выглядит следующим образом:

Теперь я хочу, чтобы добавить второй (совершенно разные) Перепад тень этот же элемент пути. Например, скажем, тень, которая поднимается вверх и слева от элемента. В CSS вся моя dropshadow может выглядеть так:

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

Как я могу сделать эти несколько теней с помощью фильтров SVG? Я взглянул на this question, который предлагает включить несколько эффектов в один фильтр, но я не уверен, как объединить несколько эффектов в один фильтр.

Спасибо за помощь!

Answer 1

Вы можете использовать атрибуты 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.