如何在 SVG 中创建嵌入阴影（透明背景）？答案

【问题标题】：How to create an inset shadow(transparent background) in SVG?如何在 SVG 中创建嵌入阴影（透明背景）？
【发布时间】：2019-04-29 09:20:42
【问题描述】：

我制作了一个简单的 SVG 图标，但我不知道如何创建嵌入阴影。

有什么办法吗？

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>

最终的结果应该是这样的：

【问题讨论】：

什么是“star/t board”？
哦，对不起。我的意思是边框。开始的寄宿生。 @Paulie_D
@Paulie_D 当然，我已经添加了应该在结果中的图片
xanthir.com/b4Yv0
我认为你不能做嵌入阴影，因为你的星星不是实心形状，因此会在线条的两侧放置阴影

标签： javascript html css svg svg-filters

【解决方案1】：

看起来您正在创建一个作为星形轮廓的形状，而不是整个形状都是星形。

<!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 有一些很好的资源。我使用它并对其进行了一些修改，以使您更接近示例图像。

编辑： Op 在 cmets 中提到他们更喜欢透明填充。 Source。这与 Sviat Kuzhelev's answer 不同，因为它使用一个连续的路径来表示形状，而不是创建多条不相交的线。

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

【讨论】：

太棒了！谢谢，但我需要与fill 和stroke 规则相同的svg，如问题：fill="transparent" stroke="transparent"。在您的提议中，您设置fill='rgb(240, 240, 240)'。这不是我的特殊情况所需要的。 :(
啊。当过滤器应用于填充时，这将变得更加复杂。您能否更新您的问题以包括透明位？从技术上讲，这在没有任何警告的情况下回答了这个问题。
开个玩笑。我找到了一个使用透明填充和描边的示例。

【解决方案2】：

这不是一个完美的解决方案，但在您的情况下它可以提供帮助。请参阅下面的示例：

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

附：你可以自己玩paths，让它们更漂亮，我想。

【讨论】：