阴影滤镜

前端教程SVG

<feDropShadow> 阴影滤镜为输入图片创建一个投影。

基本语法

  <filter id="myFilter">
    <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="1" />
  </filter>

• dx dy 投影的偏移量，默认 2
• stdDeviation 即 standard deviation，此值决定了投影时模糊操作的模糊程度，默认 2
• flood-color 阴影颜色，默认黑色
• flood-opacity 阴影透明度，默认 1

示例

下面演示了 <feDropShadow> 的使用方法：

• 注意：我们将 <filter>.width 和 height 设置为 2，即 2 倍 <circle> 的尺寸，以便当 <fefeDropShadow>.dx 和 dy 值很大时，其阴影也能显示出来