SVG-平面阴影

SVG（可缩放矢量图形）是一种用于在Web上绘制矢量图形的XML标记语言。它具有丰富的功能，其中之一就是可以创建平面阴影效果。

简介

平面阴影是一种通过给对象添加表面阴影来增强二维图形的效果。在SVG中，可以使用<feDropShadow>元素来实现平面阴影效果。该元素可以在SVG的滤镜部分使用，它会在指定的元素上创建一个具有特定颜色、偏移量、模糊度和透明度的阴影。

代码示例

下面是一个使用SVG创建平面阴影效果的示例代码片段：

```html
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义一个滤镜效果，包含平面阴影 -->
    <filter id="shadow" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="3" dy="3" /> <!-- 阴影的偏移量 -->
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
        values="0.4 0 0 0 0 0 0.4 0 0 0 0 0 0.4 0 0 0 0 0 1 0"/> <!-- 阴影的颜色 -->
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2" /> <!-- 阴影的模糊度 -->
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> <!-- 将阴影与原始图形进行混合 -->
    </filter>
  </defs>

  <!-- 使用滤镜效果创建具有平面阴影的矩形 -->
  <rect width="200" height="100" x="50" y="50" style="fill:#ff0000; filter:url(#shadow);" />
</svg>
```html

解释

该代码创建了一个宽度为400，高度为200的SVG画布，并定义了一个id为shadow的滤镜效果，在滤镜效果中使用了feOffset、feColorMatrix、feGaussianBlur和feBlend元素来创建平面阴影的效果。

具体来说，feOffset用于指定阴影的偏移量，feColorMatrix用于指定阴影的颜色，feGaussianBlur用于指定阴影的模糊度，feBlend用于将阴影与原始图形进行混合。

然后，通过使用filter属性将滤镜效果应用到一个矩形上，这个矩形的宽度为200，高度为100，位置在x=50，y=50的位置，并使用红色填充。最后，将整个SVG代码片段放在Markdown代码块中，以便正确显示和格式化。

这样，当你在浏览器中打开该SVG文档时，你将看到一个带有平面阴影的红色矩形。你可以根据需要调整滤镜效果中的参数来达到不同的阴影效果。

希望以上内容能帮助到你对SVG平面阴影的理解和应用！