0

我目前正在创建一个交互式 SVG 世界地图，左边是世界语言列表，右边是地图。当用户将鼠标悬停在语言名称上时，使用该语言的国家/地区会更改其填充值。这很好用，直到我到达印度，那里我说旁遮普语、古吉拉特语和印地语。基本代码是这样工作的：

<g id="RussianL">

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

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

</g>

...其中 'Russian' 是与左侧菜单中的单词 'russian' 对应的文本对象。我可以使用相同的策略来代表印度的语言（其中 3 种需要出现在这张地图上）吗？我尝试只添加三个“开始”属性，但这导致它们都不起作用（至少在我最新的 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 回答