SVG 阴影

SVG（Scalable Vector Graphics）是一种用于描述二维图形的XML标记语言，可以用来创建各种矢量图形。在SVG中，我们可以为图形添加阴影效果，使图形看起来更加立体和生动。

添加阴影效果

要为SVG图形添加阴影效果，我们可以使用<filter>元素来定义一个滤镜效果，然后通过filter属性将该滤镜效果应用到需要添加阴影的图形元素上。

下面是一个简单的例子，演示如何为一个矩形添加阴影效果：

// www.javascriptcn.com code example
<svg width="200" height="200">
  <defs>
    <filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
      <feOffset dx="2" dy="2" result="offsetblur"/>
      <feFlood flood-color="black"/>
      <feComposite in2="offsetblur" operator="in"/>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  
  <rect x="50" y="50" width="100" height="100" fill="orange" filter="url(#drop-shadow)"/>
</svg>

在上面的例子中，我们首先定义了一个名为drop-shadow的滤镜效果，该滤镜效果包括高斯模糊、偏移、填充和合成等操作，最终通过feMerge合并生成阴影效果。然后，我们在一个橙色矩形上应用了这个滤镜效果，实现了一个带阴影效果的矩形图形。

通过调整stdDeviation、dx、dy等属性的值，可以控制阴影的模糊程度、偏移距离和填充颜色等效果，从而实现不同风格的阴影效果。

总结

通过本章节的学习，我们了解了如何在SVG中添加阴影效果，通过定义滤镜效果并将其应用到图形元素上，可以实现丰富多样的阴影效果，为图形增添立体感和生动感。在实际开发中，可以根据需求调整阴影效果的参数，实现更加个性化的视觉效果。