SVG 阴影

<defs> 和 <filter>

所有 Internet SVG 滤镜都在 <defs> 元素中定义。

<defs> 元素是定义的缩写，包含特殊元素（例如滤镜）的定义。

<filter> 元素用于定义 SVG 滤镜。

<filter> 元素具有必需的 id 属性，用于标识滤镜。图形然后指向要使用的滤镜。

SVG <feOffset>

<feOffset> 元素用于创建阴影效果；想法是拍摄 SVG 图形（图像或元素）并将其在 xy 平面中移动一点。

下面示例偏移矩形（使用<feOffset>），然后将原始图像混合在偏移图像的顶部（使用<feBlend>）：

下面是 SVG 代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
  <h1>SVG 阴影效果</h1>
  <svg height="120" width="120">
    <defs>
      <filter id="f1" x="0" y="0" width="200%" height="200%">
        <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
        <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
      </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3"
    fill="yellow" filter="url(#f1)" />
  </svg>
</body>
</html>

尝试一下

上面示例代码说明：

<filter> 元素的 id 属性定义了滤镜的唯一名称
<rect> 元素的 filter 属性将元素链接到 "f1" 滤镜

更多示例

现在，可以使偏移图像模糊（使用<feGaussianBlur>）：

下面是 SVG 代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
  <h1>SVG 阴影效果</h1>
  <svg height="140" width="140">
    <defs>
      <filter id="f2" x="0" y="0" width="200%" height="200%">
        <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3"
    fill="yellow" filter="url(#f2)" />
  </svg>
</body>
</html>

尝试一下

上面示例代码说明：

<feGaussianBlur> 元素的 stdDeviation 属性定义模糊量

现在，使阴影变黑：

下面是 SVG 代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
  <h1>SVG 阴影效果</h1>
  <svg height="140" width="140">
    <defs>
      <filter id="f3" x="0" y="0" width="200%" height="200%">
        <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3"
    fill="yellow" filter="url(#f3)" />
  </svg>
</body>
</html>

尝试一下

上面示例代码说明：

<feOffset> 元素的 in 属性更改为 "SourceAlpha"，它使用 Alpha 通道进行模糊处理，而不是整个 RGBA 像素

现在，将阴影填充转换颜色：

下面是 SVG 代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
  <h1>SVG 阴影效果</h1>
  <svg height="140" width="140">
    <defs>
      <filter id="f4" x="0" y="0" width="200%" height="200%">
        <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
        <feColorMatrix result="matrixOut" in="offOut" type="matrix"
        values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
        <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3"
    fill="yellow" filter="url(#f4)" />
  </svg>
</body>
</html>

尝试一下

上面示例代码说明：

<feColorMatrix> 滤镜用于将偏移图像中的颜色转换为更接近黑色；矩阵中的三个 "0.2" 值都乘以红色，绿色和蓝色通道；降低其值可使颜色更接近黑色（黑色为0）

<defs> 和 <filter>

SVG <feOffset>

更多示例

相关页面