如何为SVG圆形进度条的stroke宽度区域添加内部box-shadow效果

云原生阿岚

2026-10-7

解决方案

你写的box-shadow仅对HTML盒模型元素生效，无法作用于SVG内部的<circle>这类矢量图形元素，所以现有代码无法实现描边区域的内阴影效果，需要用SVG自带的滤镜实现，修改后代码如下：

修改后的HTML代码

<div class="container">
    <div class="card">
      <div class="box">
        <div class="percent">
          <svg>
            <!-- 定义内阴影滤镜 -->
            <defs>
              <filter id="strokeInnerShadow" x="-50%" y="-50%" width="200%" height="200%">
                <feOffset dx="3" dy="3" in="SourceAlpha" result="offsetBlur"/>
                <feGaussianBlur stdDeviation="4" in="offsetBlur" result="blurResult"/>
                <feComposite in="blurResult" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowClip"/>
                <feFlood flood-color="#ccc" flood-opacity="0.8" result="shadowColor"/>
                <feComposite in="shadowColor" in2="shadowClip" operator="in" result="finalShadow"/>
                <feComposite in="finalShadow" in2="SourceGraphic" operator="over"/>
              </filter>
            </defs>
            <circle cx="100" cy="100" r="100"></circle>
            <!-- 给需要加阴影的进度条circle添加滤镜 -->
            <circle cx="100" cy="100" r="100" filter="url(#strokeInnerShadow)"></circle>
          </svg>
          <div class="number">
            <h2>55<span>%</span></h2>
          </div>
        </div>
      </div>
    </div>
  </div>

修改后的CSS代码

svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #f5f4f4;
    stroke-width: 25px;
    stroke-linecap: round;
    transform: translate(13px, 12px);
    /* 删掉不生效的box-shadow */
}