CSS 如何在SVG中创建内嵌投影

在本文中，我们将介绍如何在SVG中创建内嵌投影效果。内嵌投影可以为SVG图形增添立体感，使其在页面中更加突出。我们将使用CSS的filter属性结合feGaussianBlur和feOffset等滤镜效果的组合来实现内嵌投影效果。下面是实现步骤：

阅读更多：CSS 教程

步骤1：准备SVG图形

首先，我们需要准备一个SVG图形，可以通过直接在HTML中插入元素，或者使用jQuery等工具动态生成SVG。下面是一个简单的示例代码，展示了一个正方形的SVG图形：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" fill="blue" />
</svg>

步骤2：应用滤镜效果

要实现内嵌投影效果，我们需要使用CSS的filter属性，并结合feGaussianBlur和feOffset等滤镜效果来创建投影效果。下面是代码示例：

svg {
  filter: url(#insetDropShadow);
}

<filter id="insetDropShadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
  <feOffset in="blur" dx="3" dy="3" result="offsetBlur" />
  <feComposite in="SourceGraphic" in2="offsetBlur" operator="over" />
</filter>

通过以上代码，我们创建了一个名为insetDropShadow的滤镜效果，并将其应用在SVG上。其中，feGaussianBlur用于创建模糊效果，feOffset用于创建偏移效果，feComposite用于将滤镜效果应用在原始图形上。

步骤3：调整滤镜参数

根据实际需求，我们可以调整滤镜效果的参数来改变投影效果。在上述示例代码中，stdDeviation属性控制了模糊的程度，dx和dy属性控制了投影的偏移量。通过调整这些参数，我们可以创建出不同样式的内嵌投影效果。

示例

下面是一个完整的示例代码，展示了如何在SVG图形中创建内嵌投影效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    svg {
      filter: url(#insetDropShadow);
    }
  </style>
</head>
<body>

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" fill="blue" />

  <filter id="insetDropShadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
    <feOffset in="blur" dx="3" dy="3" result="offsetBlur" />
    <feComposite in="SourceGraphic" in2="offsetBlur" operator="over" />
  </filter>
</svg>

</body>
</html>

通过运行以上示例代码，你将会看到一个带有内嵌投影的蓝色正方形SVG图形。