1

wikimedia commons の標準の空白マップ 6 svg を使用しています。言語のリストを追加し、言語にカーソルを合わせると、対応する国が点灯したり、色が変わったり、何らかの方法で「選択されている」ことを示すようにしようとしています. これが私が使用しているコードです。

<set 
attributeName="fill" 
 from="#E0E0E0" 
 to="#FF8888" 
begin="tEnglish.mouseover" 
end="tEnglish.mouseout" 
/>

ここで、tEnglish は「英語」と書かれたテキスト オブジェクトです。運がない。

または他の方法を使用しても、定義されている属性を変更するためのsvgを取得できません。いずれかの s から fill="#E0E0E0" 属性を削除すると、それを機能させることができます (ただし、デフォルトはグレーではなく黒であり、作業している Web サイトのスタイルに適合しません) )、しかし、既に fill= 属性が含まれている場合、タグの指示どおりに変更されません。また、 fill="#E0E0E0" を削除して、スタイルシートで定義しようとしました-同じ問題です。

では、一度宣言されたパスの属性を再定義することは完全に不可能ですか? 属性が他の場所で定義されていない場合にのみ機能しますか? 私のアイデアは可能ですか？提供できるヘルプに感謝します。

あなたが持っているかもしれない他の方法（jquery、javascript）に関する提案も歓迎します。私はそれらのどれにもあまり経験がありませんが、調査を行うことができますが、リードは大歓迎です。

4

1 に答える 1

0

It works if you put the set tag inside the element:

<rect
   width="248.57143"
   height="225.71428"
   x="137.14285"
   y="395.21933"
   id="myrect"
   style="fill:#800000;">
    <set 
        attributeName="fill" 
         to="#008000" 
        begin="mouseover" 
        end="mouseout" 
        />
</rect>

You can also achieve it using simple CSS:

#myrect {
    fill: #800000;
}

#myrect:hover {
    fill: #008000;
}

Example with css: http://fiddle.jshell.net/7dcnZ/2/

Of course, JavaScript is also an option:

$('#myrect').hover(function() {
    $(this).css('fill', '#008000');
}, 
function() {
    $(this).css('fill', '#800000');
});

Example with JavaScript: http://fiddle.jshell.net/7dcnZ/3/

于 2014-03-28T15:57:28.913 に答える