如何使用CSS渐变填充SVG 实现带内阴影凸起效果的矢量图标

错误原因 #

SVG 的 fill 属性不支持直接写入 CSS 渐变语法，需要先在 SVG 内部定义渐变元素，再通过 url() 引用对应渐变的 ID 才能生效。

完整实现代码 #

修改后的 HTML 代码 #

<svg class="widgetColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.9 40.24">
  <!-- 定义径向渐变 -->
  <defs>
    <radialGradient id="skeletonGradient" cx="50%" cy="40%" r="70%" fx="50%" fy="40%">
      <!-- 中心浅灰色，对应凸起的高亮部分 -->
      <stop offset="0%" stop-color="#e2e2e2" />
      <!-- 中间过渡色 -->
      <stop offset="75%" stop-color="#b0b0b0" />
      <!-- 边缘深灰色，模拟内部阴影效果 -->
      <stop offset="100%" stop-color="#1a1a1a" />
    </radialGradient>
  </defs>
  <path d="M36.81,15.63a16.59,16.59,0,0,0-.74-3.4,17.45,17.45,0,0,0-1.39-3.12A18.64,18.64,0,0,0,18.45,0,18.62,18.62,0,0,0,2.23,9.11a16.81,16.81,0,0,0-1.4,3.12,15.94,15.94,0,0,0-.73,3.4A14.76,14.76,0,0,0,0,17.4a15.5,15.5,0,0,0,.1,1.69c0,.25.06.49.1.73s.09.57.15.86.13.62.21.93.1.35.16.52c.11.36.22.72.35,1.08.18,1.39.38,2.68.38,3.41A4,4,0,0,0,5.5,30.67L7,31.4H7a5.37,5.37,0,0,1,.53,1,3.52,3.52,0,0,1,.15.42c0,.13.07.25.1.38a4.93,4.93,0,0,1,.11.94v1a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5v-1a4.93,4.93,0,0,1,.11-.94c0-.13.06-.25.1-.38s.1-.28.15-.42a5.41,5.41,0,0,1,.54-1h0l1.51-.73a4.05,4.05,0,0,0,4.06-4.05c0-.73.19-2,.37-3.41.14-.36.25-.72.36-1.08l.15-.52c.08-.31.15-.62.22-.93s.1-.57.14-.86.08-.48.11-.73c0-.55.09-1.11.09-1.69A17.19,17.19,0,0,0,36.81,15.63ZM11.22,28.3a5,5,0,0,1-5-5c0-2.79.17-4,3-4s7.13,1.24,7.13,4A5,5,0,0,1,11.22,28.3Zm7.23,1.24c-1,0-1.76,1.85-1.76.88a3.29,3.29,0,0,1,1-2.22c.23-.19.48.53.75.53s.52-.72.75-.53a3.3,3.3,0,0,1,1,2.22C20.22,31.39,19.43,29.54,18.45,29.54ZM26.9,28.3a5,5,0,0,1-5-5c0-2.79,4.35-4,7.13-4s3,1.24,3,4A5,5,0,0,1,26.9,28.3Z"/>
</svg>

修改后的 CSS 代码 #

.widgetColor {
  position: absolute;
  margin-top: 5px;
  margin-left: 5px;
  max-width: 24px;
  overflow: auto;
  /* 引用提前定义的径向渐变 */
  fill: url(#skeletonGradient);
  /* 外发光效果可根据需求调整参数 */
  filter: drop-shadow(0px 0px 2px rgba(255,255,255,0.8));
  stroke: blueviolet;
  stroke-width: 0.5px;
}

自定义调整说明 #

• 调整 <radialGradient> 标签的 cx、cy、r 属性可以修改渐变的中心位置和覆盖范围，匹配想要的凸起弧度
• 修改 <stop> 节点的 offset 和 stop-color 可以调整渐变的过渡比例和颜色，完全对齐旧版视觉效果
• 如果需要线性渐变，把 <radialGradient> 替换为 <linearGradient> 并设置 x1、y1、x2、y2 属性指定渐变方向即可

内容的提问来源于stack exchange，提问作者ScorpVisual