Question

我制作了一个简单的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>

最终结果应为：

Answer 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希望使用透明填充。 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>

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

P.S。我认为，您可以自己玩paths左右，并使它们更漂亮。

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

2 个答案: