15.SVG使用投射偏移结合模糊特性来实现阴影特效

原创

liuhao951866 2022-04-13 10:00:36 ©著作权

©著作权归作者所有：来自51CTO博客作者liuhao951866的原创作品，请联系作者获取转载授权，否则将追究法律责任

SVG <feOffset>

SVG的投影效果和CSS3的drop-shadow属性类似。

实例代码1 - 简单投影

<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"></feOffset>

      <feBlend in="SourceGraphic" in2="offOut" mode="normal"></feBlend>

    </filter>

  </defs>

  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"></rect>

</svg>

代码解释

上述代码定义了1个矩形（rect）元素和2个滤镜元素feOffset和feBlend
rect元素通过id（为f1）链接到滤镜feOffset，表示将产生一个在x和y方向上偏移（20px，20px）的投影
feBlend滤镜效果使得源元素覆盖在投影元素之上
in="SourceGraphic" 表示效果应用于整个图形元素

实例代码2 - 模糊投影

<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"></feOffset>

      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"></feGaussianBlur>

      <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>

    </filter>

  </defs>

  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)"></rect>

</svg>

代码解释

在例子1上通过feGaussianBlur滤镜添加了模糊效果，该模糊效果只应用在投影元素上。
stdDeviation属性用来定义高斯模糊的程度。

实例代码3 - 暗影效果

<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"></feOffset>

      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"></feGaussianBlur>

      <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>

    </filter>

  </defs>

  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)"></rect>

</svg>

代码解释

<feOffset> 元素的in属性被修改为"SourceAlpha"，这将只把模糊效果使用在Alpha通道上，而不是整个RGBA像素。

实例代码3 - 颜色变换

<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"></feOffset>

      <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"></feColorMatrix>

      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10"></feGaussianBlur>

      <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>

    </filter>

  </defs>

  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)"></rect>

</svg>

代码解释