在 svg 中创建内部阴影

Posted 2023-03-28

【中文标题】在 svg 中创建内部阴影

【英文标题】：Creating inner shadow in svg

【发布时间】：2021-12-16 07:26:08

【问题描述】：

我是 svg 的新手，我正在尝试创建类似于所附图片的内部阴影。我尝试了其他堆栈溢出答案，但阴影似乎没有附加的 png 强。专家们能否提出任何可能的方法来实现同样的目标？

【参考方案1】：

我们可以使用box-shadow 和inset 选项。

<svg style="background: rgb(51,54,148); width: 439px; height: 419px; box-shadow: 0 0 15px 6px inset rgba(255,0,96,0.8)"></svg>

【参考方案2】：

这看起来不像是正常的嵌入阴影 - 边框附近的不透明度太高。所以你必须做一些花哨的过滤来复制它。以下内容适用于任何形状：

<svg  >
  <defs>
  <filter id="strong-inner">
    <feFlood flood-color="red"/>

<!-- This next operation subtracts the original shape from the red color 
field filling the filter region - which will give you a big color border 
surrounding the original shape -->
    <feComposite operator="out" in2="SourceGraphic" />

<!-- Next we want to expand the red border so it overlaps the space of the 
original shape - the radius 4 below will expand it by 4 pixels -->

    <feMorphology operator="dilate" radius="4"/>
    <feGaussianBlur stdDeviation="5" />

<!-- After blurring it, we want to select just the parts of the blurred, 
expanded border that overlap the original shape - which we can do by using 
the 'atop' operator -->

    <feComposite operator="atop" in2="SourceGraphic"/>
  </filter>
  </defs>
  
  <rect x="10" y="10"   fill="rgb(50, 0 , 200)" filter="url(#strong-inner)"/>
</svg>

【讨论】：

你能解释一下“边界附近的不透明度太高”是什么意思吗？这是一种有趣的方法，但我不认为我看到它与其他答案相比有什么不同

有两件事：它适用于任何形状（填充路径、圆形等），而不仅仅是矩形。并且阴影颜色在边界处完全不透明。如果增加 feMorphology 的半径，您可以更清楚地看到这一点。

是的，这似乎是非矩形形状的最佳选择，但对于矩形，带有正确分布的嵌入框阴影似乎可以实现几乎相同的结果.不过，我将不得不进行更多实验......

这对我来说适用于较小的 stdDeviation 但具有较大的值（例如 30）。不透明度仍然变低。

很好的解决方案！！！顺便说一句，如果说 "normal inset shadow" 是关于 css 投影，那么我们有第 4 个数字选项用于完全不透明的边框偏移。