W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

SVG 阴影



<defs> 和 <filter>

所有互联网的SVG滤镜定义在 <defs> 元素中。<defs> 元素定义短并含有特殊元素(如滤镜)定义。

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


SVG <feOffset>

实例 1

<feOffset> 元素用于创建阴影效果。这个想法是采用SVG图形(图像或元素),并在xy平面上移动一点。

第一个实例将偏移矩形(使用 <feOffset>),然后将原始图像混合在偏移图像的顶部(使用 <feBlend>):

feoffset

SVG代码如下:

Example

<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>
尝试一下 »

代码解析:

  • <filter>元素 id 属性定义一个滤镜的唯一名称
  • <rect>元素的滤镜属性用来把元素链接到 "f1" 滤镜

实例 2

现在,偏移图像可以变的模糊(含 <feGaussianBlur>):

feoffset2

SVG代码如下:

Example

<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>
尝试一下 »

代码解析:

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

实例 3

现在,制作一个黑色的阴影:

feoffset3

SVG代码如下:

Example

<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>
尝试一下 »

代码解析:

  • <feOffset> 元素的属性改为 "SourceAlpha" 在Alpha通道使用残影,而不是整个RGBA像素。

实例 4

现在为阴影涂上一层颜色:

feoffset4

SVG代码如下:

Example

<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>
尝试一下 »

代码解析:

  • <feColorMatrix> 滤镜是用来转换偏移的图像使之更接近黑色的颜色。 '0.2' 矩阵的三个值都获取乘以红色,绿色和蓝色通道。降低其值带来的颜色至黑色(黑色为0)