如何在透明矩形 SVG 上添加阴影效果

Question

我希望在透明的SVG元素上加上投影效果。

我尝试了各种不同的滤镜但都无法实现。使用CSS3滤镜在SVG元素上 (filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));)，新的dropshadow滤镜 (<feDropShadow>)，以及旧的滤镜：

<filter xmlns="http://www.w3.org/2000/svg" id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
      <feOffset dx="2" dy="2" result="offsetblur"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.2"/>
      </feComponentTransfer>
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>

这可以通过使用CSS3 box-shadow来实现。 Codepen 我希望在一个透明元素上有一个阴影，但实际的透明元素会遮挡住阴影（因此元素本身是透明的，但有类似霓虹灯的外发光）。

我想要能够控制：

- 模糊程度 - 扩散程度 - 颜色

任何帮助将不胜感激 :)

- Lukas Chen

Answer 1

如果原始形状是完全透明的，由于某些原因，您无法执行此操作。但是，您可以从几乎完全透明的原始形状开始，并最终得到一个完全透明的形状，其周围带有普通投影。

使用1％填充不透明度绘制形状。将它们拉入滤镜时，使用colormatrix将其alpha乘以100，并将其用作投影的基础。在最终版本中，您将不会使用原始的1％不透明度形状，因为如果使用“out”运算符，则会丢弃与原始（已处理）形状重叠的任何内容。

svg {
  background: #33D; 
}

<svg width="500px" height="400px">
<defs>
  <filter id="trans-shadow">
  <feColorMatrix type="matrix" values="1 0 0 0 0 
                                       0 1 0 0 0 
                                       0 0 1 0 0 
                                       0 0 0 100 0"
                                       result="boostedInput"/>
                                       
  <feGaussianBlur stdDeviation="5"/>
  <feComposite operator="out" in2="boostedInput"/>
  </filter>
</defs>


<circle filter="url(#trans-shadow)" x="100" y="100" r="050" cx="150" cy="150" fill="black" fill-opacity="0.01" />


</svg>

我假设这些形状并不总是有阴影，因此您希望它们没有阴影时尽可能透明。如果这些形状从来不没有不带投影的显示，则可以跳过一步，最初直接用黑色绘制这些形状，并仍然使用“out”将其丢弃。如下所示：

svg {
  background: #33D; 
}

<svg width="500px" height="400px">
<defs>
  <filter id="trans-shadow">                                          
  <feGaussianBlur stdDeviation="5"/>
  <feComposite operator="out" in2="SourceGraphic"/>
  </filter>
</defs>


<circle filter="url(#trans-shadow)" x="100" y="100" r="050" cx="150" cy="150" fill="black" />


</svg>

- Michael Mullany

Answer 2

我为您制作了一个Codepen，可能会有所帮助 我自己试着玩了一下，我认为您可以从这里开始进行自己想要的工作。 这是HTML代码：

    <div id="background">
     <div id="mybox">
<svg viewBox="0 0 142.71 92.903" enable-background="new 0 0 142.71 92.903" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M141.348,91.677H1.71v-90h139.638v58
    c0,0,0,6.194,0,9S141.348,91.677,141.348,91.677z"/>
</svg>
  </div>
</div>

and the css:

    #mybox{
  position: absolute;
  top: 20%;
  left: 40%;
}
svg{
box-shadow: 0 0 341px 71px rgb(137, 105, 148, 0.8);
width: 80%;
cursor: move;
}


#background {
  margin-left: 10%;
  max-width: 100%;
  height: 600px;
  background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
  background-repeat: no-repeat;

- Yilmaz

---

希望这对你有所帮助！ - Yilmaz

首先，我非常感谢你。看起来你在 CodePen 的示例上花了很多时间。但是我需要在单独的 SVG 元素（例如 path、rect）上添加盒子阴影，而不是在 SVG 根元素上添加。但是我仍然非常感谢你！ - Lukas Chen

不用客气，很抱歉没有帮到你。请随意使用这段代码！ - Yilmaz