是否可以在svg中制作背景位置动画

Question

我正试图在svg的背景中制作渐变动画。这可能吗？

.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

如果您希望在该形状内动画化线性渐变(通过移动它(，您可以使用CSS/HTML而不是SVG来定义形状。

这个片段采用线性渐变，并使其成为div的背景。使用带有多边形的剪辑路径对div进行剪辑以形成形状，并对背景设置动画以重复垂直向下移动。

.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>