为svg中的一个'set'元素设置多个'begin'属性答案

【问题标题】：set multiple 'begin' attributes for one 'set' element in svg为svg中的一个'set'元素设置多个'begin'属性
【发布时间】：2012-08-31 21:10:17
【问题描述】：

我目前正在创建一个交互式 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，还是我只是使用了错误的文件类型来完成我希望完成的任务？

谢谢！

【问题讨论】：

标签： svg mouseover onmouseover

【解决方案1】：

您想要多个集合元素，每个元素都有自己的开始/结束。

<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" />

【讨论】：