我有一个动画SVG，我想在显示动画时显示它的动画。换句话说，我需要SVG动画仅在用户向下滚动时才开始！但是它是在页面加载后开始的，甚至在用户看到之前就结束了。
这是我的SVG代码：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="58px" height="58px" viewBox="0 0 58 58" enable-background="new 0 0 58 58" xml:space="preserve" style="height: 85px; width: 85px;">
<path fill="none" stroke="#E31E26" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M10.946,23.818
c0.638-0.516,1.297-1.05,1.929-1.592c0.491-0.419,0.92-0.536,1.503-0.411c0.807,0.175,1.642,0.303,2.526,0.441
c0.325,0.05,0.663,0.103,1.013,0.159c-0.221-0.269-0.436-0.524-0.644-0.773c-0.591-0.708-1.151-1.378-1.651-2.07
c-0.248-0.343-0.387-0.891-0.34-1.332c0.092-0.853,0.246-1.713,0.394-2.543c0.05-0.276,0.099-0.551,0.146-0.826
c-0.673,0.422-1.284,0.895-1.875,1.354c-0.307,0.238-0.625,0.484-0.941,0.717c-0.334,0.243-0.851,0.386-1.257,0.34
c-0.869-0.097-1.749-0.252-2.679-0.416c-0.323-0.057-0.651-0.115-0.996-0.173c0.211,0.261,0.41,0.511,0.604,0.753
c0.505,0.634,0.983,1.231,1.492,1.779c0.554,0.599,0.708,1.225,0.512,2.093c-0.16,0.714-0.281,1.451-0.396,2.163
c-0.048,0.297-0.098,0.595-0.147,0.89l0.062,0.054C10.449,24.222,10.697,24.02,10.946,23.818z" class="lJbcJjBX_0"></path>
<path fill="none" stroke="#E31E26" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M25.466,17.765
c0.861-0.696,1.75-1.417,2.603-2.148c0.662-0.566,1.242-0.723,2.028-0.554c1.089,0.236,2.216,0.409,3.409,0.595
c0.438,0.067,0.894,0.138,1.367,0.215c-0.299-0.362-0.589-0.708-0.869-1.043c-0.797-0.956-1.553-1.859-2.229-2.793
c-0.334-0.462-0.521-1.202-0.458-1.797c0.124-1.151,0.331-2.311,0.532-3.432c0.067-0.372,0.133-0.744,0.197-1.115
c-0.908,0.57-1.732,1.208-2.53,1.826c-0.414,0.322-0.844,0.653-1.27,0.967c-0.452,0.328-1.148,0.521-1.696,0.458
c-1.173-0.131-2.36-0.341-3.615-0.562c-0.436-0.076-0.879-0.155-1.343-0.234c0.285,0.352,0.553,0.689,0.815,1.017
c0.681,0.855,1.326,1.662,2.013,2.401c0.747,0.808,0.955,1.652,0.69,2.824c-0.216,0.963-0.379,1.958-0.535,2.918
c-0.065,0.401-0.133,0.803-0.199,1.201l0.083,0.073C24.796,18.31,25.13,18.037,25.466,17.765z" class="lJbcJjBX_1"></path>
<path fill="none" stroke="#E31E26" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M17.941,30.16
c-0.344-0.54-0.7-1.055-1.112-1.651c-0.15-0.214-0.302-0.436-0.462-0.668c-0.034,0.286-0.07,0.557-0.102,0.818
c-0.092,0.707-0.17,1.317-0.207,1.938c-0.039,0.644-0.298,1.08-0.837,1.418c-0.543,0.338-1.076,0.712-1.592,1.075
c-0.211,0.149-0.421,0.296-0.632,0.442l0.016,0.087c0.232,0.025,0.463,0.052,0.695,0.079c0.554,0.066,1.127,0.137,1.692,0.174
c0.872,0.058,1.433,0.392,1.817,1.087c0.28,0.503,0.625,0.986,0.992,1.5c0.142,0.196,0.286,0.399,0.436,0.614
c0.034-0.283,0.066-0.553,0.098-0.813c0.087-0.712,0.163-1.326,0.209-1.955c0.048-0.646,0.311-1.082,0.847-1.411
c0.552-0.335,1.091-0.712,1.613-1.076c0.186-0.129,0.37-0.257,0.556-0.386c-0.951-0.25-1.833-0.395-2.693-0.441
C18.69,30.959,18.292,30.71,17.941,30.16z" class="lJbcJjBX_2"></path>
<path fill="none" stroke="#E31E26" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M43.172,46.744L24.923,20.908L21.061,23.682L39.526,49.438Z" class="lJbcJjBX_3"></path>
<path fill="none" stroke="#E31E26" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M26.924,31.861" class="lJbcJjBX_4"></path>
<path fill="none" stroke="#E31E26" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M30.689,29.076L26.924,31.861" class="lJbcJjBX_5"></path>
<style data-made-with="vivus-instant">
.lJbcJjBX_0 {
animation: lJbcJjBX_draw 900ms ease-in-out 0ms forwards;
stroke-dasharray: 35 37;
stroke-dashoffset: 36;
}
.lJbcJjBX_1 {
animation: lJbcJjBX_draw 900ms ease-in-out 0ms forwards;
stroke-dasharray: 47 49;
stroke-dashoffset: 48;
}
.lJbcJjBX_2 {
animation: lJbcJjBX_draw 900ms ease-in-out 0ms forwards;
stroke-dasharray: 29 31;
stroke-dashoffset: 30;
}
.lJbcJjBX_3 {
animation: lJbcJjBX_draw 900ms ease-in-out 0ms forwards;
stroke-dasharray: 73 75;
stroke-dashoffset: 74;
}
.lJbcJjBX_4 {
animation: lJbcJjBX_draw 900ms ease-in-out 0ms forwards;
stroke-dasharray: 0 2;
stroke-dashoffset: 1;
}
.lJbcJjBX_5 {
animation: lJbcJjBX_draw 900ms ease-in-out 0ms forwards;
stroke-dasharray: 5 7;
stroke-dashoffset: 6;
}
@keyframes lJbcJjBX_draw {
100% {
stroke-dashoffset: 0;
}
}
@keyframes lJbcJjBX_fade {
0% {
stroke-opacity: 1;
}
92.15686274509804% {
stroke-opacity: 1;
}
100% {
stroke-opacity: 0;
}
}
</style>
</svg>
实现此目标的最佳方法是什么？
感谢您的帮助！
答案 0 :(得分：1)
您会在这里找到有关如何随时触发动画而不是页面加载的说明：SVG trigger animation with event
为检测用户滚动位置，我强烈建议使用ScrollMagic库：http://scrollmagic.io/。您需要在页面的特定位置设置一个“场景”，当用户进入场景时，您可以触发特定事件（在这种情况下为svg动画）。