Is it possible to make a background-position animation inside svg? - css

Question

I'm trying to make a gradient animation in the background of a of a svg. Is this possible?
.ani_a {
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%;
}
#keyframes anibg01 {
0% { background-position: 0% 0%; }
100% { background-position: 0% 100%; }
}
<svg>
<polygon class="ani_a" points="35,70 70,70 105,0 70,0 "/>
</svg>

Answer 1

If you are looking to animate the linear gradient (by moving it) within that shape you could take an alternative approach using CSS/HTML rather than SVG to define the shape.
This snippet takes the linear-gradient and makes it the background of a div. The div is clipped to give a shape using clip-path with a polygon and the background is animated to move vertically downwards with repetition.
.ani_a {
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: 100% 100%;
width: 20vmin;
height: 10vmin;
display: inline-block;
clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%);
}
#keyframes anibg01 {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0 10vmin;
}
}
<div class="ani_a">div</div>