能否在SVG内部元素上实现background-position背景渐变动画？

实现方案 #

你的需求完全可以实现，原有代码不生效的核心原因是：SVG内部的图形元素（polygon、path等）不支持CSS的background系列属性，这类属性仅对HTML元素生效，SVG图形的填充需要使用SVG自带的渐变规则实现。

下面给两种可用的实现方式：

方案1：纯SVG原生实现（兼容性最优） #

直接在SVG内定义渐变，通过动画控制渐变的位置实现滚动效果，不需要额外依赖CSS的background属性：

<svg width="150" height="100" viewBox="0 0 150 100">
  <defs>
    <!-- 定义和你原有CSS一致的渐变色 -->
    <linearGradient id="aniGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0d4ba0" />
      <stop offset="7.14%" stop-color="#00adee" />
      <stop offset="14.28%" stop-color="#00aba5" />
      <stop offset="21.42%" stop-color="#37b34a" />
      <stop offset="28.56%" stop-color="#8dc63f" />
      <stop offset="35.7%" stop-color="#ccdb29" />
      <stop offset="42.84%" stop-color="#ffdd15" />
      <stop offset="49.98%" stop-color="#fff100" />
      <stop offset="57.12%" stop-color="#f6921e" />
      <stop offset="64.26%" stop-color="#f05a28" />
      <stop offset="71.4%" stop-color="#ec1c24" />
      <stop offset="78.54%" stop-color="#ff008b" />
      <stop offset="85.68%" stop-color="#90278e" />
      <stop offset="92.82%" stop-color="#652d90" />
      <stop offset="100%" stop-color="#0d4ba0" />
      <!-- 内置动画控制渐变滚动，和你原有动画参数一致 -->
      <animate attributeName="y1" from="0%" to="100%" dur="10s" repeatCount="indefinite" />
      <animate attributeName="y2" from="100%" to="200%" dur="10s" repeatCount="indefinite" />
    </linearGradient>
  </defs>
  <!-- 给多边形填充上面定义的渐变 -->
  <polygon fill="url(#aniGradient)" points="35,70 70,70 105,0 70,0  "/>
</svg>

如果想把动画逻辑放到CSS里统一管理也可以，把上面的<animate>标签删掉，加上以下CSS即可：

#aniGradient {
  animation: moveGradient 10s infinite linear;
}
@keyframes moveGradient {
  0% {
    y1: 0%;
    y2: 100%;
  }
  100% {
    y1: 100%;
    y2: 200%;
  }
}

方案2：CSS遮罩实现（可复用你原有渐变代码） #

如果你不想重新定义SVG渐变，想直接复用已经写好的CSSbackground动画，可通过CSS遮罩实现，只需要修改原有代码为以下结构：

<div class="ani_a"></div>

.ani_a {
  width: 150px;
  height: 100px;
  /* 原有渐变和动画代码完全保留 */
  background-color: #fff;
  animation: anibg01 10s infinite linear;
  background-image: linear-gradient(0deg,#0d4ba0,#00adee,#00aba5,#37b34a,#8dc63f,#ccdb29,#ffdd15,#fff100,#f6921e,#f05a28,#ec1c24,#ff008b,#90278e,#652d90,#0d4ba0,#00adee);
  background-size: 1500% 100%;
  /* 新增遮罩，用你原有polygon的形状裁剪渐变背景 */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 70"><polygon points="35,70 70,70 105,0 70,0"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 70"><polygon points="35,70 70,70 105,0 70,0"/></svg>') no-repeat center / contain;
}
@keyframes anibg01 {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

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