svg - 创建一个不带圆圈本身的 SVG 圆圈阴影

Question

我想创建一个圆的阴影，同时使圆的中心保持透明。

我不知道该怎么做。我尝试过使用蒙版和滤镜，但它们似乎相互抵消。 mask 切断过滤器。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200" height="200" viewBox="0 0 200 200" >
  <defs>
    <filter id="blur">
      <feDropShadow dx="0" dy="0" stdDeviation="4.5"
          flood-color="black"/>
    </filter>
    <mask id="circle-mask" x="0" y="0" width="1" height="1">  
      <circle cx="75" cy="75" r="50" />  
    </mask>
  </defs>
  <circle cx="75" cy="75" r="50" style="mask: url(#circle-mask) filter: url(#blur)"/>
</svg>

我尝试使用圆圈作为剪辑路径，但这会剪辑圆圈之外的所有内容(我想剪辑内部)。我尝试过打乱这些组，将蒙版放在组上，将过滤器放在圆圈上(反之亦然)。我尝试过将蒙版和滤镜放入样式中。

我一事无成。如何使圆圈内部透明？

Answer 1

您可以通过扩展过滤器以紧凑的方式完成此操作。附加的 feComposite/out 将删除与原始形状重叠的任何内容(假设您的形状始终完全不透明)。

body {
background: grey;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200" height="200" viewBox="0 0 200 200" >
  <defs>
    <filter id="blur-out">
      <feDropShadow dx="0" dy="0" stdDeviation="4.5"
          flood-color="black"/>
      <feComposite operator="out" in2="SourceGraphic"/>
    </filter>
  </defs>
  <circle cx="75" cy="75" r="50" filter= "url(#blur-out)"/>
</svg>