我的问题是我想创建一个 svg 文件(代码在下面提到)，就像一个垂直的丝带(已经完成)，现在我想给出一个从顶部到底部开始的波浪效果，并将处于连续模式。但它不起作用。
@keyframes thread{
from {
stroke-dashoffset: 200;
opacity:.5;
}
to{
stroke-dashoffset: 2;
opacity:1;
}
}
.anime{
stroke-dasharray: 200;
animation: thread 2s .4s forwards infinite ease-in-out;
}<div class="position-absolute">
<svg height="200" width="200" >
<g class="anime">
<path id="shape-1" d="M100 0 c-20 20 -20 25 -10 40 s20 30 -2 60 h50 m11.5 -100 c-20 20 -20 25 -10 40 s20 30 -2 60"
fill="transparent" stroke="black" stroke-width="2"></path>
<path id="shape-2" d="M100 0 c-25 25 -25 30 -15 40 s25 35 -9 55 h64 m16.5 -105 c-25 25 -25 30 -15 45 s25 35 -4 60"
fill="transparent" stroke="black" stroke-width="2">
</path>
</g>
</svg>
</div>最佳答案
我想你正在寻找这样的东西(如果我错了请纠正我):
var svg = document.getElementById("cups");
var s = Snap(svg);
var ribbon1 = Snap.select('#ribbon1');
var ribbon2 = Snap.select('#ribbon2');
var ribbon1Points = ribbon1.node.getAttribute('d');
var ribbon2Points = ribbon2.node.getAttribute('d');
var toRibbon2 = function(){
ribbon1.animate({ d: ribbon2Points }, 1000, toRibbon1);
}
var toRibbon1 = function(){
ribbon1.animate({ d: ribbon1Points }, 1000, toRibbon2);
}
toRibbon1();h1 {
text-align: center;
}
svg {
display: block;
margin: 0 auto;
}
#ribbon2 {
opacity: 0;
}
svg {
fill: lightgrey;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg width="100" height="130" viewBox="0 0 75 47" xmlns="http://www.w3.org/2000/svg">
<path id="ribbon1" class="cls-1" d="M64.5,64.5c0,15-4,19-4,31a17.23,17.23,0,0,0,10,16h28s-11-8-11-17,1-16,1-30-1-25-1-25h-26S64.5,49.5,64.5,64.5Z" transform="translate(-58.85 -39)"/>
<path id="ribbon2" class="cls-1" d="M61,60c0,15,5.5,23.5,5.5,35.5s-6,16-6,16h28s5-4,5-13S85,76,85,62s2.5-22.5,2.5-22.5h-26S61,45,61,60Z" transform="translate(-58.85 -39)"/>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</body>
</html>它可能需要对路径本身进行一些调整以产生更逼真的效果。在这里它专门应用于您的路径:
var svg = document.getElementById("cups");
var s = Snap(svg);
var ribbon1 = Snap.select('#ribbon1');
var ribbon2 = Snap.select('#ribbon2');
var ribbon1Points = ribbon1.node.getAttribute('d');
var ribbon2Points = ribbon2.node.getAttribute('d');
var toRibbon2 = function() {
ribbon1.animate({
d: ribbon2Points
}, 1000, toRibbon1);
}
var toRibbon1 = function() {
ribbon1.animate({
d: ribbon1Points
}, 1000, toRibbon2);
}
toRibbon1();h1 {
text-align: center;
}
svg {
display: block;
margin: 0 auto;
}
#ribbon2 {
opacity: 0;
}
svg {
fill: lightgrey;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg height="200" width="200">
<g class="anime">
<path id="ribbon1" d="M100 0 c-20 20 -20 25 -10 40 s20 30 -2 60 h50 m11.5 -100 c-20 20 -20 25 -10 40 s20 30 -2 60"
fill="transparent" stroke="black" stroke-width="2"></path>
<path id="ribbon2" d="M100 0 c-25 25 -25 30 -15 40 s25 35 -9 55 h64 m16.5 -105 c-25 25 -25 30 -15 45 s25 35 -4 60"
fill="transparent" stroke="black" stroke-width="2">
</path>
</g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</body>
</html>这是一个广泛的 guide关于如何制作这个(我的回答基于此)。它基本上是两个 SVG 路径，随着时间的推移相互变形。
关于javascript - 如何在 svg 中制作色带的垂直波浪动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52218554/