SVG 阴影

  • <defs> 和 <filter>

    所有 Internet SVG 滤镜都在 <defs> 元素中定义。
    <defs> 元素是定义的缩写,包含特殊元素(例如滤镜)的定义。
    <filter> 元素用于定义 SVG 滤镜。
    <filter> 元素具有必需的 id 属性,用于标识滤镜。 图形然后指向要使用的滤镜。
  • SVG <feOffset>

    <feOffset> 元素用于创建阴影效果;想法是拍摄 SVG 图形(图像或元素)并将其在 xy 平面中移动一点。
    下面示例偏移矩形(使用<feOffset>),然后将原始图像混合在偏移图像的顶部(使用<feBlend>):
    &nbsp;
    下面是 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>):
    &nbsp;
    下面是 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 属性定义模糊量
    现在,使阴影变黑:
    &nbsp;
    下面是 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 像素
    现在,将阴影填充转换颜色:
    &nbsp;
    下面是 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)
  • 相关页面