我一直在使用大量教程来尝试让我的 svg 具有阴影,但没有任何效果!
这是我的 fiddle :https://jsfiddle.net/5nfdovg5/
这是我做的:
- 创建了一个名为“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 元素,您在问题中链接到的示例投影代码没有这样做。取消嵌套使事情按预期工作。
<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>
关于css - 如何创建 svg 投影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30488725/