如何在SVG中创建嵌入阴影（透明背景）？
[英]How to create an inset shadow(transparent background) in SVG?
问题描述
I make a simple SVG Icon, but I cannot figure out how to create an inset shadow. 
我制作了一个简单的SVG图标，但无法弄清楚如何创建插图阴影。
Is it some way to make it? 有某种方法可以做到吗？
svg { filter: drop-shadow(.1px 1.5px .1px rgba(0,0,0,0.5)); }
<!DOCTYPE html> <html> <body> <svg width="124" height="124" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" fill="transparent" stroke="white" stroke-width="1"> <path d="M15.668 8.626l8.332 1.159-6.065 5.874 1.48 8.341-7.416-3.997-7.416 3.997 1.481-8.341-6.064-5.874 8.331-1.159 3.668-7.626 3.669 7.626zm-6.67.925l-6.818.948 4.963 4.807-1.212 6.825 6.068-3.271 6.069 3.271-1.212-6.826 4.964-4.806-6.819-.948-3.002-6.241-3.001 6.241z"/> </svg> </body> </html>
The final result should be as this one: 最终结果应为：
2 个解决方案
解决方案1
4 已采纳 2018-11-27 16:07:34
It looks like you are creating a shape that is the outline of the a star rather than the whole shape being a star. 看起来您正在创建的形状是恒星的轮廓，而不是整个形状是恒星。
<!DOCTYPE html> <html> <body> <svg width="260" height="245" xmlns="http://www.w3.org/2000/svg" fill="rgb(240, 240, 240)" stroke="transparent" stroke-width="1"> <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%"> <feComponentTransfer in=SourceAlpha> <feFuncA type="table" tableValues="1 0" /> </feComponentTransfer> <feGaussianBlur stdDeviation="1"/> <feOffset dx="0" dy="2" result="offsetblur"/> <feFlood flood-color="rgb(20, 0, 0)" result="color"/> <feComposite in2="offsetblur" operator="in"/> <feComposite in2="SourceAlpha" operator="in" /> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode /> </feMerge> </filter> <path filter="url(#inset-shadow)" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/> </svg> </body> </html>
Paulie_D had some good resources. Paulie_D有一些不错的资源。 I used that and modified it a bit to get you closer to your example image. 我使用了它并对其进行了一些修改，以使您更接近示例图像。
Edit: Op mentioned in comments that they would prefer a transparent fill. 编辑： Op在评论中提到他们希望透明填充。 Source . 来源 。 This is different from Sviat Kuzhelev's answer as this uses one contiguous path for the shape rather than creating multiple disjointed lines. 这与Sviat Kuzhelev的答案不同，因为它使用一条连续的路径作为形状，而不是创建多条不连续的线。
<html> <body> <svg> <defs> <filter id="inset-shadow" width="200%" height="200%"> <!-- Shadow Offset --> <feOffset dx="0" dy="1" /> <!-- Shadow Blur --> <feGaussianBlur stdDeviation="1" result="offset-blur" /> <!-- Invert the drop shadow to create an inner shadow --> <feComposite operator="out" in="SourceGraphic" result="inverse" /> <!-- Color & Opacity --> <feFlood flood-color="black" flood-opacity=".75" result="color" /> <!-- Clip color inside shadow --> <feComposite operator="in" in="color" in2="inverse" result="shadow" /> <!-- Shadow Opacity --> <feComponentTransfer in="shadow" result="shadow"> <feFuncA type="linear" slope="1" /> </feComponentTransfer> <!-- Put shadow over original object --> <!--<feComposite operator="over" in="shadow" in2="SourceGraphic"/>--> </filter> </defs> <path filter="url(#inset-shadow)" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z" /> </svg> </body> </html>
解决方案2
2 2018-11-27 16:33:50
It's not a perfect solution, but in your case it can help. 这不是一个完美的解决方案，但对您而言可以提供帮助。 See my example below: 请参阅下面的示例：
<!DOCTYPE html> <html> <body> <svg width="26" height="30" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" fill="transparent" stroke="white" stroke-width="1"> <defs> <filter id="shadow"> <feDropShadow dx="0" dy="1" stdDeviation=".3"/> </filter> </defs> <path style="fill:transparent; filter:url(#shadow);" filter="drop-shadow(.1px 1.5px .1px rgba(0,0,0,0.5))" d="M15.668 8.626l8.332 1.159-6.065 5.874 1.48 8.341-7.416-3.997-7.416 3.997 1.481-8.341-6.064-5.874 8.331-1.159 3.668-7.626 3.669 7.626zm-6.67.925l-6.818.948 4.963 4.807-1.212 6.825 6.068-3.271 6.069 3.271-1.212-6.826 4.964-4.806-6.819-.948-3.002-6.241-3.001 6.241z"/> <path stroke="white" fill="white" stroke-width="1" d=" M 0 11 L 0 0 L 12 0 L 12 3 L 9 9 L 0 10 " /> <path stroke="white" fill="white" stroke-width="1" d=" M 0 10 L 0 30 L 5 30 L 5 25 L 6 15 L 0 10 " /> <path stroke="white" fill="white" stroke-width="1" d=" M 3 30 L 26 30 L 26 25 L 21 26 L 13 20 L 2 26 " /> <path stroke="white" fill="white" stroke-width="1" d=" M 26 0 L 26 30 L 20 30 L 20 26 L 18 16 L 23 10 L 16 10 L 13 4 L 13 0 L 26 0 " /> </svg> </body> </html>
PS You can play with around paths at you own and make them more pretty, I think. PS，我认为，您可以自己玩转paths ，并使它们更漂亮。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.