[英]Start a svg animation onclick event
当为 SVG 多边形的动画提供初始开始时间时,以下代码可以正常工作。 但是我无法弄清楚如何通过 javascript/jquery 触发它而不提供“vbanim”动画的开始时间。
$('button').click(function() { $('#v-b').beginElement(); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Click to draw</button> <svg width="100px" height="100px" preserveAspectRatio="false" viewBox="0 0 500 800"> <polygon points="20,20 490,20 490,780 20,780" stroke="black" fill="transparent" stroke-width="2" id="vb" stroke-dasharray="3000"/> <animate xlink:href="#vb" attributeName="stroke-dashoffset" from="3000" to="0" dur="2s" begin="indefinite" fill="freeze" id="vbanim"/> <animate xlink:href="#vb" attributeName="fill" from="transparent" to="rgba(130,130,130,0.6)" dur="1s" begin="vbanim.end" fill="freeze"/> </svg>
我只需要在单击按钮之后才会出现 stroke-dashoffset 和填充动画,在此之前,SVG 根本不应该可见。 感谢您的帮助。
使用 beginElement() 在生成事件时无限期启动动画的首选工作解决方案。
注意- beginElement()函数仅适用于本机 javascript/而不适用于 Jquery。
$('button').click(function() { document.getElementById('vbanim').beginElement(); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Click to draw</button> <svg width="100px" height="100px" preserveAspectRatio="false" viewBox="0 0 500 800"> <polygon points="20,20 490,20 490,780 20,780" stroke="black" fill="transparent" stroke-width="0" id="vb" stroke-dasharray="3000" /> <animate class="anim1" xlink:href="#vb" attributeName="stroke-dashoffset" from="3000" to="0" dur="2s" begin="indefinite" fill="freeze" id="vbanim"/> <animate class="anim2" xlink:href="#vb" attributeName="fill" begin="vbanim.end" from="transparent" to="rgba(130,130,130,0.6)" dur="1s" fill="freeze"/> <animate class="anim3" xlink:href="#vb" attributeName="stroke-width" from="0" to="10" dur="0.2s" begin="vbanim.begin" fill="freeze" id=""/> </svg>
嗨,我不确定你想达到什么目的..
请参阅示例代码的链接..
https://codepen.io/deibu21/pen/jYQLEO
我所做的是我在 animate 标签中创建了一个类..然后使用 jquery 的 attr() 来定位“begin”的属性请看下面的代码..
$('button').click(function() {
$('svg animate.anim1').attr("begin", 2);
$('svg animate.anim2').attr("begin", 3);
})
希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.