jquery - jQueryはすべてのSVGパスを選択し、アニメーション塗りつぶしを適用します

Question

クリックとホバーで塗りつぶしをアニメーション化するリージョンを含む作業国マップがあります。各パスは個別に機能します。

すべてのパスにクリック効果を適用する[すべて選択/すべてクリア]オプションを追加したいと思います。新しいdivを作成しました

<div id="selectAll">Click to Select All</div>

次に、jQueryを使用します

$('#selectAll').click(function(){
  $("[id^=Co]").animate({
         fill: '#698B22'
         }, 300);
});

すべてのIDが「Co」で始まるため、セレクター"[id^=Co]"はすべてのパスにアクセスできます。このセレクターは、各リージョンのqtipでも完全に機能します。

ここで何が間違っているのかわかりません。どんなガイダンスも大いに役立ちます。tia

score 3 · Accepted Answer

jquery.colorプラグインを追加してから、コードの前に追加します。

  jQuery.Color.hook( "fill stroke" );

その後、元のアニメーション機能が機能します

$('#selectAll').click(function(){
  $("[id^=Co]").animate({
         fill: '#698B22'
         }, 300);
});

score 2 · Accepted Answer

選択操作では、ラファエルのアニメーション機能を使用するために、何らかの方法でラファエルオブジェクトを取得する必要があります。それが可能かどうかはわかりません。

ただし、set後で変更する必要のあるパスのラファエルを作成し、setクリックしてその塗りつぶしを変更することもできます。

2 に答える 2