0

私は現在、左側に世界言語のリスト、右側に地図を表示したインタラクティブなSVG世界地図を作成しています。ユーザーが言語名にカーソルを合わせると、それが話されている国によって塗りつぶしの値が変更されます。これは、パンジャブ語、グジャラート語、ヒンディー語がすべて話されているインドに着くまでは問題なく機能します。基本的なコードは次のように機能します。

<g id="RussianL">

<path id="russia" d="blah blah blah" />

<set attributeName="fill" to="#CC3232" begin="Russian.mouseover" end="Russian.mouseout" />

</g>

...ここで、「ロシア語」は、左側のメニューの「ロシア語」という単語に対応するテキストオブジェクトです。これと同じ戦略を使用して、インドの言語を表すことはできますか（そのうちの3つをこのマップに表示する必要があります）。3つの「begin」属性を入力しようとしましたが、いずれも機能しません（少なくとも最新のChromeとFirefoxでは）。

それで、インラインコードでこれを行う方法はありますか、それともjavascript / jqueryを使用する必要がありますか、それとも私が達成したいことに対して間違ったファイルタイプを使用していますか？

ありがとう！

4

1 に答える 1

2

それぞれ独自の開始/終了を持つ複数のセット要素が必要です。

<set attributeName="fill" to="blue" begin="Punjabi.mouseover" end="Punjabi.mouseout" />
<set attributeName="fill" to="orange" begin="Gujarati.mouseover" end="Gujarati.mouseout" />
<set attributeName="fill" to="pink" begin="Hindi.mouseover" end="Hindi.mouseout" />
于 2012-09-07T06:42:05.980 に答える