Question

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

<g id="RussianL">

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

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

</g>

...其中'俄语'是与左侧菜单上的'俄语'一词对应的文本对象。我可以使用相同的策略来表示印度的语言（其中3种需要出现在这张地图上）吗？我尝试过只放入三个“开始”属性，但这导致它们都不起作用（至少在我最新的Chrome和Firefox中）。

那么，有没有办法用内联代码做这个，或者我需要使用javascript / jquery，还是我只是使用错误的文件类型来实现我希望完成的工作？

谢谢！

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

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

1 个答案: