Css 如何创建svg投影？

我一直在使用一系列教程，试图让我的svg有一个阴影，但没有任何工作

这是我的小提琴：

这就是我所做的：

创建了一个名为“gradient-1”的渐变填充。此有效：

当我添加dropshadow过滤器（称为“dropshadow”）时，只显示阴影，而不显示应该位于顶部的圆。。只是一个模糊的黑色圆圈：

我想要的效果是：

你知道我做错了什么吗

以下是完整的标记：

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

---

您似乎嵌套了feFilter元素，而您在问题中链接到的示例drop shadow代码没有嵌套这些元素。让事情按预期进行