如何创建 svg 投影？

Question

我一直在使用大量教程来尝试让我的 svg 具有阴影，但没有任何效果！

这是我的 fiddle：https://jsfiddle.net/5nfdovg5/

这是我所做的：

创建了一个名为 "Gradient-1" 的 渐变填充 。这有效：
当我添加 dropshadow 过滤器（称为 "dropshadow"）时，它 仅显示阴影 和 none 应该在顶部的圆圈..只是一个黑色模糊圆圈：
我想要的效果在这里：
- http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow-lighter.svg

对我做错了什么有什么想法吗？

这是完整的标记：

<svg width="200" height="200">
    <defs>
        <linearGradient id="Gradient-1" x1="20%" y1="30%" x2="40%" y2="80%">
            <stop offset="0%" stop-color="#B8D0DE"></stop>            
            <stop offset="100%" stop-color="#73A2BD"></stop>
        </linearGradient>
        <filter id="dropshadow" xmlns="http://www.w3.org/2000/svg" height="130%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3">
                <feOffset dx="2" dy="2" result="offsetblur">
                    <feComponentTransfer>
                        <feFuncA type="linear" slope="0.2"></feFuncA>
                    </feComponentTransfer>      
                    <feMerge>
                        <feMergeNode>
                            <feMergeNode in="SourceGraphic"></feMergeNode>
                        </feMergeNode>
                    </feMerge>
                </feOffset>
            </feGaussianBlur>
        </filter>
    </defs> 
    <circle cx="125" cy="125" r="25" filter="url(#dropshadow)" fill="url(#Gradient-1)"></circle>
</svg>

Answer 1

您似乎嵌套了 feFilter 元素，问题中您 link 的示例投影代码没有这样做。取消嵌套使事情按预期工作。

<svg width="200" height="200">
    <defs>
        <linearGradient id="Gradient-1" x1="20%" y1="30%" x2="40%" y2="80%">
            <stop offset="0%" stop-color="#B8D0DE"></stop>            
            <stop offset="100%" stop-color="#73A2BD"></stop>
        </linearGradient>
        <filter id="dropshadow" xmlns="http://www.w3.org/2000/svg" height="130%" width="130%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
            <feOffset dx="2" dy="2" result="offsetblur"/>
            <feComponentTransfer>
                <feFuncA type="linear" slope="0.2"></feFuncA>
            </feComponentTransfer>      
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
    </defs> 
    <circle cx="125" cy="125" r="25" filter="url(#dropshadow)" fill="url(#Gradient-1)"></circle>
</svg>

如何创建 svg 投影？

How do I create a svg drop shadow?

css

svg

svg-filters