jQuery SVGプラグインを使用してSVGアニメーションのパフォーマンスを改善するには

Question

私のバンドのウェブサイト用の最初のjavascriptプロジェクトを構築していますが、現在svgベースのアニメーションのパフォーマンスを向上させようとしています（具体的には、 ）。ここにページを表示することができます：http://djangotheband.com/specialLink.html 私はsvg要素を生成するためにKeith WoodのjQuery 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と呼ばれるようです。