我正在尝试使用 Snap.svg 为 Stroke-dasharray
制作动画,但没有让它工作:什么也没有发生。目标是将直线动画化为虚线。
SVG
<svg>
<line fill="none" stroke="#008D36" stroke-width="2" stroke-miterlimit="10" x1="175" y1="153" x2="175" y2="21" id="Line"/>
</svg>
CSS
line {
stroke-dasharray: 0,0;
}
Javascript
$(function() {
var s = Snap('svg');
var l = s.select('#Line');
l.animate({'stroke-dasharray':'1,20'}, 500);
});
看到这个 fiddle :http://jsfiddle.net/u4pxW/5/
最佳答案
这取决于您想要什么效果,但您应该能够为其设置动画。有几种不同的动画方法,也许对于这个特定的示例,我会尝试 Snap.animate...
var s = Snap('svg');
var l = s.select('#Line');
Snap.animate(0,20, function( value ) {
l.attr({ 'stroke-dasharray': '1,' + value});
}, 2000);
关于javascript - 如何使用 Snap.svg 制作笔划破折号的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24650846/