如何为SVG环形进度条的浅灰色描边添加内盒阴影

AI 小北

2026-10-7

解决方案

要给SVG环形进度条的浅灰色基础描边添加内阴影，不能直接使用CSS的box-shadow属性，需要借助SVG自带的滤镜能力实现，操作步骤如下：

步骤1：修改SVG结构，添加内阴影滤镜定义

在你的<svg>标签内部新增<defs>标签，声明专门用于描边内阴影的滤镜：

<svg class="progress-bar">
  <!-- 新增滤镜定义部分 -->
  <defs>
    <filter id="inner-stroke-shadow" x="-50%" y="-50%" width="200%" height="200%">
      <!-- 阴影偏移、模糊设置 -->
      <feOffset dx="1" dy="1" in="SourceAlpha" result="offsetblur" />
      <feGaussianBlur stdDeviation="2" in="offsetblur" result="blur" />
      <!-- 阴影颜色设置，这里用浅灰色，可自行调整 -->
      <feFlood flood-color="#e0e0e0" flood-opacity="0.7" result="shadowColor" />
      <feComposite in="shadowColor" in2="blur" operator="in" result="shadow" />
      <!-- 裁剪出仅作用于描边区域的内阴影 -->
      <feComposite in="shadow" in2="SourceGraphic" operator="atop" result="innerShadow" />
      <feComposite in="innerShadow" in2="SourceGraphic" operator="over" />
    </filter>
  </defs>
  <circle class="base-circle-bar" />
  <circle class="progress-circle-bar" />
</svg>

步骤2：给基础环形添加滤镜CSS属性

修改.base-circle-bar的样式，绑定上面定义的滤镜：

.progress-bar .base-circle-bar {
    stroke: #f5f4f4;
    fill: transparent;
    stroke-width: 28;
    r: 120;
    cx: 149;
    cy: 136;
    /* 新增这一行应用内阴影滤镜 */
    filter: url(#inner-stroke-shadow);
}