javascript—我想使用jquery使用“stroke dasharray”和“stroke dashoffset”将html的每个svg文件设置为页面动画

swvgeqrz 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(362)

我想让它为每个svg运行。这里是youtube视频的链接，作为我使用jquery查找所有svg文件的效果的参考。我是新来jquery的，建议和解释将不胜感激。先谢谢你
下面是我的jquery代码：

$(document).ready(function(){
$('svg path').each(function() {
        $(this).each(function(i) {
            var path = $(this).get(i);
            dashVal = path.getTotalLength();
            $(this).css({
                'stroke-dasharray': dashVal + 100,
                'stroke-dashoffset': dashVal + 100,
                'animation': 'line-fill 2s ease forwards',
                'animation-delay': i + 's'
            });
        });
    });

});

我的代码在第一个svg中运行良好。

jquery JavaScript css svg svg-animate

来源：https://stackoverflow.com/questions/68320849/i-want-to-make-each-svg-files-of-html-to-page-animated-using-stroke-dasharray

1条答案

按热度按时间

ijxebb2r1#

在阅读了一些文章后，我了解了svg元素的笔划，其中上述函数仅适用于具有笔划属性的svg元素。

$('svg path').each(function() {
        $(this).each(function(i) {
            $(this).attr("stroke", "currentColor"); // added this line to my code
            var path = $(this).get(i);
            dashVal = path.getTotalLength();
            $(this).css({
                'stroke-dasharray': dashVal + 100,
                'stroke-dashoffset': dashVal + 100,
                'animation': 'line-fill 2s ease forwards',
                'animation-delay': i + 's'
            });
        });
    });

现在所有的SVG都在制作动画，但是其中一些SVG没有制作动画，但是输出并不像预期的那样。

赞(0）回复(0）举报 2021-09-23

我来回答

javascript—我想使用jquery使用“stroke dasharray”和“stroke dashoffset”将html的每个svg文件设置为页面动画

1条答案

相关问题

热门标签

最新问答