SVG FEDropShadow.in1 属性

SVG FEDropShadow.in1 属性是定义一个图形元素的边缘阴影滤镜的输入通道。该属性需要配合SVG的过滤器一起使用，通过对一个图形元素应用 FEDropShadow 过滤器来实现边缘阴影效果。

语法

<filter id="myFilter">
  <feDropShadow in="SourceAlpha" dx="3" dy="3" stdDeviation="4" />
</filter>

在以上代码片段中，in="SourceAlpha" 就是使用该属性，默认将图形元素的 alpha 通道作为输入通道，其它可用的输入通道包括 SourceGraphic 和 BackgroundImage，支持多个输入通道的输入组合。

各属性含义

• in (可选): 定义了输入通道的来源，必须是另一个过滤器的输出通道或是当前滤镜链里的输入源。默认值是 SourceAlpha，表示使用图形元素自身的 alpha 通道作为输入源。
• stdDeviation (可选): 定义了阴影的模糊程度，这里的模糊是指像素点颜色的取值上的模糊，不是指图形元素的几何形状。stdDeviation 的值越大，阴影就越模糊。通常情况下，stdDeviation 的值与 dx 和 dy 一起使用，以控制阴影的位置和模糊程度。
• dx 和 dy (可选): 分别定义阴影沿 X 和 Y 轴的偏移量，单位是像素。默认值是 0，表示阴影不偏移，如果希望阴影呈现在图形元素的下方，就可以将 dx 和 dy 值都设置为一个正整数。
• flood-color (可选): 定义阴影颜色，可以是任何合法的 SVG 颜色值，包括命名颜色、十六进制颜色值等等。默认值是黑色（#000000）。
• flood-opacity (可选): 定义阴影的不透明度，值的范围是 0 到 1 之间的浮点数，0 表示完全透明，1 表示完全不透明。默认值是 1，表示完全不透明。

示例

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect width="80" height="60" x="10" y="20" fill="yellow" />
  <filter id="shadow">
    <feDropShadow in="SourceAlpha" dx="2" dy="2" stdDeviation="2" flood-color="#cccccc" flood-opacity="0.5"/>
  </filter>
  <rect width="80" height="60" x="10" y="20" fill="#039be5" filter="url(#shadow)"/>
</svg>

以上示例中，先在 SVG 画布上添加了一个矩形，然后定义了一个名为 shadow 的过滤器，该过滤器使用 feDropShadow 滤镜将矩形添加上了阴影效果。最后，将该过滤器应用到 SVG 画布上的第二个矩形，实现了一个带阴影的矩形。