在 svg 中创建内阴影

Question

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

Answer 1

这看起来不像正常的嵌入阴影 - 边界附近的不透明度太高。因此，您必须进行一些奇特的过滤才能复制它。这是适用于任何形状的东西：

<svg width="500px" height="180px">
  <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" width="300" height="150" fill="rgb(50, 0 , 200)" filter="url(#strong-inner)"/>
</svg>

Answer 2

我们可以将

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>