SVG 阴影学习笔记

什么是SVG阴影？

SVG（Scalable Vector Graphics）是一种矢量图形语言，支持阴影和透明度等特性。在SVG中，阴影是通过添加 <filter> 元素来实现的。

如何在SVG中创建阴影？

要在SVG中创建阴影，必须使用 <filter> 元素。下面是一个示例：

svgCopy Code
<svg width="200" height="200">
  <defs>
    <filter id="drop-shadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
      <feOffset dx="2" dy="2" result="offsetblur"/>
      <feFlood flood-color="rgba(0,0,0,0.5)"/>
      <feComposite in2="offsetblur" operator="in"/>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <rect x="50" y="50" width="100" height="100" style="fill: red; filter: url(#drop-shadow);"/>
</svg>

在上面的示例中，我们创建了一个id为 "drop-shadow" 的过滤器。该过滤器使用 <feGaussianBlur>、<feOffset>、<feFlood> 和 <feMerge> 等元素来实现阴影效果。然后，在矩形元素中使用 "filter" 属性将过滤器应用于该元素。

运行以上代码，将会在一个200x200的SVG画布中显示一个红色矩形，并添加了阴影效果。

SVG阴影实例

下面是一个更复杂的示例，其中包含了多个图形、不同类型的过滤器以及动画效果：

svgCopy Code
<svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow1" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
      <feOffset dx="5" dy="5" result="offsetblur"/>
      <feFlood flood-color="#000" flood-opacity=".5"/>
      <feComposite in2="offsetblur" operator="in"/>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="shadow2" x="-50%" y="-50%" width="200%" height="200%">
      <feComponentTransfer in="SourceAlpha">
        <feFuncR type="discrete" tableValues="1"/>
        <feFuncG type="discrete" tableValues="0"/>
        <feFuncB type="discrete" tableValues="0"/>
      </feComponentTransfer>
      <feGaussianBlur stdDeviation="3"/>
      <feComposite operator="in" in2="SourceGraphic"/>
      <feOffset dx="2" dy="2" result="offsetblur"/>
      <feFlood flood-color="#ff00ff" flood-opacity=".5"/>
      <feComposite in2="offsetblur" operator="in"/>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <rect x="50" y="50" width="100" height="100" style="fill: red; filter: url(#shadow1);"/>
  
  <circle cx="250" cy="100" r="50" style="fill: green; filter: url(#shadow2);">
    <animate attributeName="cx" from="0" to="500" dur="4s" repeatCount="indefinite"/>
  </circle>
  
  <polygon points="200,250 275,350 125,350" style="fill: blue; filter: url(#shadow1);"/>
  
  <text x="250" y="300" fill="#fff" font-size="60" font-family="Verdana" filter="url(#shadow2)">SVG Shadow</text>
</svg>

在上面的示例中，我们定义了两个过滤器（id为 "shadow1" 和 "shadow2"），并在矩形、圆形、多边形和文本中使用这些过滤器来创建不同类型的阴影效果。此外，我们还为圆形元素添加了一个动画效果，使其移动。

运行以上代码，将会看到一个具有多种形状和阴影效果的SVG图形。