CSS动画中使用linear-gradient填充SVG心形无颜色显示问题求助

云原生阿岚

2026-9-24

问题原因

SVG的fill属性不支持直接使用CSS的linear-gradient值，必须先在SVG内部预定义渐变元素，再通过ID引用该渐变才能生效。

解决步骤

在SVG标签内添加<defs>块，定义你需要的渐变效果，给它设置唯一ID
将CSS中所有填充#9356DC的位置，替换为url(#你的渐变ID)即可

完整修改后代码

HTML部分

<div class="icon">
   <svg class="heart-main" viewBox="0 0 512 512" width="100" title="heart">
      <!-- 新增渐变定义 -->
      <defs>
        <linearGradient id="heartGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#9356DC" />
          <stop offset="100%" stop-color="#FF79DA" />
          <!-- 可以自行调整渐变颜色、偏移量和渐变方向 -->
        </linearGradient>
      </defs>
      <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" />
   </svg>
</div>

CSS部分

.icon {
  fill: transparent;
  stroke: black;
  stroke-width: 50;
  cursor: pointer;
  position: absolute;
  right: 1.5rem;
  bottom: 2rem;
}

.icon svg {
  overflow: visible;
  width: 1.6rem;
}

.icon .heart-main:active path {
  animation: fill-animation 1.5s ease-in-out forwards;
  stroke: #9356DC; /* 描边如果要改成渐变也可以用同样的方法替换为url(#heartGradient) */
}

@keyframes fill-animation {
  10% {
    fill: url(#heartGradient);
  }
  80% {
    fill: url(#heartGradient);
  }
  100% {
    fill: url(#heartGradient);
  }
}