为什么我在 svg 过滤器中的两个嵌入阴影不起作用？答案

【问题标题】：Why my two inset shadow in svg filters doesn't work?为什么我在 svg 过滤器中的两个嵌入阴影不起作用？
【发布时间】：2015-11-03 13:22:40
【问题描述】：

我尝试在 svg 元素中制作两个嵌入阴影，但它不起作用。第一个阴影覆盖在第二个。

这是一个过滤代码：

<filter id="shadow-r-l" x="-50%" y="-50%" width="200%" height="200%">

    <feOffset dx="50" dy="50" result="offset2"/>
    <feGaussianBlur stdDeviation="8" in="offset2" result="offset-blur2"/>
    <feComposite operator="out" in="SourceGraphic" in2="offset-blur2" result="inverse2" />
    <feFlood flood-color="black" flood-opacity="0.5" result="color2" />
    <feComposite operator="in" in="color2" in2="inverse2" result="shadow2" />
    <feComposite operator="over" in="shadow2" in2="SourceGraphic" result="inset-shadow2" />

    <feOffset dx="20" dy="20" result="offset"/>
    <feGaussianBlur stdDeviation="8" in="offset" result="offset-blur"/>
    <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse" />
    <feFlood flood-color="white" flood-opacity="0.5" result="color" />
    <feComposite operator="in" in="color" in2="inverse" result="shadow" />
    <feComposite operator="over" in="shadow" in2="SourceGraphic" result="inset-shadow" />

    <feMerge>
      <feMergeNode/>
      <feMergeNode in="inset-shadow2" />
      <feMergeNode in="inset-shadow" />
    </feMerge>
</filter>

【问题讨论】：

标签： css svg filter shadow

【解决方案1】：

代码正在创建“inset-shadow2”结果，它是左上边缘变暗的源图像。然后代码将创建“插图阴影”结果，它是左上边缘变亮的源图像。然后代码使用 feMerge 在“inset-shadow2”结果上绘制“inset-shadow”结果。由于“inset-shadow”和“inset-shadow2”结果占用相同的空间，“inset-shadow”结果将完全覆盖“inset-shadow2”结果。我假设您打算在源图像上组合明暗效果。如果是这样，您可以将 feMerge 元素替换为多个 feComposite 元素。

代码没有在 feOffset 元素上指定 in 属性。这可能会导致第二个 feOffset 元素出现问题，我认为该元素旨在使用 SourceGraphic 作为输入。

进行这些更改会产生以下代码...

<filter id="shadow-r-l" x="-50%" y="-50%" width="200%" height="200%">

    <feOffset dx="50" dy="50" in="SourceGraphic" result="offset2"/>
    <feGaussianBlur stdDeviation="8" in="offset2" result="offset-blur2"/>
    <feComposite operator="out" in="SourceGraphic" in2="offset-blur2" result="inverse2" />
    <feFlood flood-color="black" flood-opacity="0.5" result="color2" />
    <feComposite operator="in" in="color2" in2="inverse2" result="shadow2" />

    <feOffset dx="20" dy="20" in="SourceGraphic" result="offset"/>
    <feGaussianBlur stdDeviation="8" in="offset" result="offset-blur"/>
    <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse" />
    <feFlood flood-color="white" flood-opacity="0.5" result="color" />
    <feComposite operator="in" in="color" in2="inverse" result="shadow" />

    <feComposite operator="over" in="shadow2" in2="SourceGraphic" result="inset-shadow2" />
    <feComposite operator="over" in="shadow" in2="inset-shadow2" result="inset-shadow2-shadow" />

</filter>

【讨论】：