Как я могу улучшить производительность анимации SVG с помощью плагина jQuery SVG

Question

Я создаю свой первый проект javascript для веб-сайта моей группы, и в настоящее время я пытаюсь повысить производительность анимации на основе svg (в частности, производительность моего события click).Вы можете просмотреть страницу здесь: http://djangotheband.com/specialLink.html Я использую плагин Кейта Вуда 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 () {});

Как я уже сказал, это мой первый проект, поэтому многое из этого для меня очень ново.Пожалуйста, дайте мне любые предложения по улучшению производительности моей анимации, и если вам нужно больше деталей, пожалуйста, дайте мне знать.Спасибо!

Answer 1

Если вы можете переключиться с непрозрачности на непрозрачность заполнения (возможно, вместе с непрозрачностью обводки), вы, скорее всего, увидите лучшую производительность.В плагине Keith Woods свойство SVG fill-opacity, кажется, называется svgFillOpacity.