SVG 投影

使用 <feDropShadow /> 给图像添加阴影效果

<svg height="110" width="110" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1">
      <feDropShadow dx="12" dy="14" stdDeviation="1" flood-opacity="0.7"/>
    </filter>
  </defs>
  <rect width="90" height="90" fill="yellow" filter="url(#f1)" />
</svg>

<feOffset /> 和 <feBlend />

<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f11" width="120" height="120">
      <feOffset in="SourceGraphic" dx="40" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f11)" />
  Sorry, your browser does not support inline SVG.
</svg>

使用 <feGaussianBlur /> 虚化图片

<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f2" width="120" height="120">
      <feOffset in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"  fill="yellow" filter="url(#f2)" />
</svg>

黑色阴影

<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f3" width="120" height="120">
      <feOffset in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
</svg>

使用色彩矩阵处理阴影

<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f4" width="120" height="120">
      <feOffset in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix 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 stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" />
</svg>