如何创建svg投影?

时间:2015-05-27 16:55:00

标签: css svg svg-filters

我一直在使用一堆教程试图让我的svg有一个投影,但没有任何工作!

这是我的小提琴:https://jsfiddle.net/5nfdovg5/

这就是我所做的:

  1. 创建了一个名为“Gradient-1”渐变填充有效
    • enter image description here
  2. 当我添加投影阴影过滤器(称为“投影阴影”)时,仅显示阴影,并且没有任何圆圈应该是在顶部..只是一个黑色的模糊圈:
    • enter image description here
  3. 我想要的效果是:
  4. 关于我做错的任何想法?

    以下是完整标记:

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

1 个答案:

答案 0 :(得分:4)

您似乎嵌套了feFilter元素,而您在问题中链接到的示例阴影代码却没有。无条件使事情按预期工作。

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