如何使用 jQuery SVG 插件提高 svg 动画性能答案

【问题标题】：How can i improve svg animation performance using jQuery SVG plugin如何使用 jQuery SVG 插件提高 svg 动画性能
【发布时间】：2012-03-06 03:59:45
【问题描述】：

我正在为我的乐队网站构建我的第一个 javascript 项目，我目前正在尝试提高基于 svg 的动画的性能（特别是我的点击事件的性能）。您可以在这里查看页面：http://djangotheband.com/specialLink.html 我正在使用 Keith Wood 的 jQuery SVG 插件来生成 svg 元素，并使用他的附加动画插件来为云设置动画。我使用 css 将颜色添加到云中。这是执行动画的代码：

$('#svgScape').mouseenter(function () {

    //lightning strike on click                                     
    $('polygon').click(function () {

        $('#lightning').animate({svgOpacity: 1.0}, 150);
        $('#lightning').animate({svgOpacity: 0.0}, 15);
        });

    //animate cloud when user rolls over it
    $('#cloud > polygon').mouseenter(function () {
        //sets the svg opacity to 0%
        $(this).animate({svgOpacity: 0.0}, 100);

    }).mouseleave(function () {
        //sets the svg opacity back to 100%
        $(this).animate({svgOpacity: 1.0}, 400);
        });

}).mouseleave(function () {});

正如我所说，这是我的第一个项目，所以很多内容对我来说都是全新的。请给我任何建议，以提高我的动画性能，如果您需要更多详细信息，请告诉我。谢谢！

【问题讨论】：

从这里看起来不错。所有主要浏览器都没有延迟。使用相当标准的 CPU，没什么好说的。你在看什么？

标签： jquery animation svg

【解决方案1】：

如果您可以从不透明度切换到填充不透明度（可能与描边不透明度一起），您可能会看到更好的性能。在 Keith Woods 插件中，SVG fill-opacity 属性似乎被称为 svgFillOpacity。

【讨论】：