css - 如何在透明矩形 svg 上有阴影

Question

我想在透明的 SVG 元素上添加阴影。

我尝试过使用各种不同类型的过滤器，但都无济于事。 svg 元素上的 css3 过滤器(filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));)，新的阴影过滤器(<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

我希望在透明元素上有一个阴影，但实际的透明元素会覆盖在阴影上(因此元素本身是透明的，但具有类似 NEON 的外发光)

我希望能够控制:

• 模糊
• 传播
• 颜色

任何帮助将不胜感激:)

Answer 1

如果原始形状是完全透明的形状，则您不能执行此操作 - 由于某些原因 - 但您可以从几乎完全透明的原始形状开始执行此操作，并最终得到一个被正常投影包围的完全透明形状。

使用 1% 的填充不透明度绘制形状。当您将它们拉入过滤器时，使用颜色矩阵将它们的 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>