我有以下问题：
我在我的网站上添加了一个svg。 SVG包含一个我想要动画的圆圈。到目前为止，圆圈上的动画效果很好。现在，如果用户在移动电话或平板电脑上观看网站，则当用户到达SVG时动画将已经结束。因此，当用户向下滚动然后添加类时，我想让SVG出现。
我已经为此编写了一些代码，问题是我的jquery在开头添加了HTML标记，当我向下滚动并出现SVG时，动画已经结束了。
代码如下：
<div class="col-6"><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="120px" height="120px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="50.002" x2="100" y2="50.002">
<stop offset="0" style="stop-color:#9AC5EB"/>
<stop offset="1" style="stop-color:#7AB1E1"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M50,0.002V50H0c0,0,0,0.001,0,0.002c0,27.614,22.386,50,50,50s50-22.386,50-50S77.614,0.002,50,0.002
z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="154" y1="-134.75" x2="199" y2="-134.75" gradientTransform="matrix(2 0 0 -2 -298 -219.5)">
<stop offset="0" style="stop-color:#322C7A"/>
<stop offset="1" style="stop-color:#282B61"/>
</linearGradient>
<circle fill="url(#SVGID_2_)" enable-background="new" cx="50" cy="50" r="40" id="lock">
</circle>
<g>
<g opacity="0.1">
<path fill="#010202" d="M30.502,33.454c2.21-0.402,5.274-0.704,9.442-0.704c4.52,0,7.836,0.954,9.994,2.762
c2.01,1.656,3.314,4.318,3.314,7.482c0,3.214-1.004,5.876-2.912,7.684c-2.46,2.461-6.328,3.614-10.696,3.614
c-1.156,0-2.21-0.048-3.014-0.2v12.754h-6.126V33.454H30.502z M36.628,49.222c0.754,0.202,1.758,0.25,3.014,0.25
c4.62,0,7.432-2.258,7.432-6.226c0-3.766-2.612-5.776-6.882-5.776c-1.706,0-2.912,0.152-3.566,0.302v11.45H36.628z"/>
</g>
<g>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="164.1426" y1="-133.3228" x2="184.5285" y2="-133.3228" gradientTransform="matrix(2 0 0 -2 -298 -219.5)">
<stop offset="0" style="stop-color:#9AC5EB"/>
<stop offset="1" style="stop-color:#7AB1E1"/>
</linearGradient>
<path fill="url(#SVGID_3_)" d="M30.502,30.802c2.21-0.402,5.274-0.704,9.442-0.704c4.52,0,7.836,0.954,9.994,2.762
c2.01,1.656,3.314,4.318,3.314,7.482c0,3.214-1.004,5.876-2.912,7.684c-2.46,2.46-6.328,3.615-10.696,3.615
c-1.156,0-2.21-0.049-3.014-0.201v12.754h-6.126V30.802H30.502z M36.628,46.572c0.754,0.202,1.758,0.25,3.014,0.25
c4.62,0,7.432-2.258,7.432-6.226c0-3.766-2.612-5.776-6.882-5.776c-1.706,0-2.912,0.152-3.566,0.302v11.45H36.628z"/>
</g>
</g>
<g>
<g opacity="0.1">
<path fill="#010202" d="M55.158,61.176c1.41,0.856,4.068,1.756,6.277,1.756c2.713,0,3.918-1.102,3.918-2.709
c0-1.656-1.004-2.511-4.02-3.568c-4.766-1.656-6.777-4.266-6.729-7.128c0-4.318,3.568-7.684,9.244-7.684
c2.709,0,5.072,0.704,6.477,1.456l-1.208,4.37c-1.05-0.604-3.011-1.406-5.173-1.406c-2.207,0-3.411,1.056-3.411,2.562
c0,1.558,1.151,2.31,4.268,3.416c4.419,1.605,6.476,3.867,6.528,7.482c0,4.418-3.464,7.684-9.946,7.684
c-2.962,0-5.622-0.756-7.432-1.758L55.158,61.176z"/>
</g>
<g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="164.1426" y1="-135.7368" x2="184.5298" y2="-135.7368" gradientTransform="matrix(2 0 0 -2 -298 -219.5)">
<stop offset="0" style="stop-color:#9AC5EB"/>
<stop offset="1" style="stop-color:#7AB1E1"/>
</linearGradient>
<path fill="url(#SVGID_4_)" d="M55.158,58.525c1.41,0.856,4.068,1.757,6.277,1.757c2.713,0,3.918-1.103,3.918-2.71
c0-1.656-1.004-2.51-4.02-3.568c-4.766-1.656-6.777-4.266-6.729-7.128c0-4.318,3.568-7.684,9.244-7.684
c2.709,0,5.072,0.704,6.477,1.456l-1.208,4.37c-1.05-0.604-3.011-1.406-5.173-1.406c-2.207,0-3.411,1.056-3.411,2.562
c0,1.558,1.151,2.31,4.268,3.416c4.419,1.605,6.476,3.868,6.528,7.482c0,4.418-3.464,7.684-9.946,7.684
c-2.962,0-5.622-0.756-7.432-1.758L55.158,58.525z"/>
</g>
</g>
</svg></div>
这是SVG。现在ID #lock是我想在用户向下滚动时动画的那个。我试过这个：
$(window).scroll( function(){
if (window.matchMedia('').matches) {
$('.col-6').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({opacity:'1'},2000, 'easeInOutQuart');
}
});
}
if (window.matchMedia('').matches) {
$('#lock').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).html('<animate attributeType="xml" attributeName="r" from="0" to="40" dur="2s"/>');
}
});
}
});
第一个工作，当我通过滚动到达它时，DIV出现。第二个不起作用。 HTML已经在页面加载中添加。
有什么建议吗？
答案 0 :(得分：0)
您可以将<animate />元素保留在<circle />内，但将其begin属性设置为indefinite，即：
<circle cx="50" cy="50" r="40">
<animate attributeName="r" from="0" to="40" dur="2s" begin="indefinite" />
</circle>`
然后在scroll事件处理程序中使用.beginElement()元素的animate方法：
$(window).on('scroll', function(e){
var circleTop = $('circle').offset().top - window.innerHeight;
if( window.scrollY >= circleTop ){
$('circle animate').get(0).beginElement();
}
});