1

我正在使用来自 wikimedia commons 的标准空白地图 6 svg。我添加了一个语言列表，我正在努力做到这一点，以便当我将鼠标悬停在一种语言上时，相应的国家/地区会亮起，改变颜色，或者以某种方式表明它们已被“选中”。这是我正在使用的代码。

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

其中 tEnglish 是表示“English”的文本对象。没运气。

无论是使用或其他任何方法，我都无法让 svg 更改已定义的属性。这意味着如果我从其中一个 s 中删除 fill="#E0E0E0" 属性，我可以让它工作（尽管如此，默认值是黑色而不是灰色，这不符合我正在处理的网站的风格)，但如果 已经包含一个 fill= 属性，它不会按照标签的指示进行更改。我也试过删除 fill="#E0E0E0" 并在样式表中定义它——同样的问题。

那么，是否完全不可能在声明路径后重新定义路径的属性？仅当该属性未在其他地方定义时才有效？我的想法甚至可能吗？我很感激可以提供的任何帮助。

我也欢迎您对您可能拥有的其他方法（jquery、javascript）提出任何建议；虽然我对他们中的任何一个都没有那么有经验，但我可以做一些研究，但任何领导都会受到赞赏。

4

1 回答 1

0

如果将set标签放在元素内，它会起作用：

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

你也可以使用简单的 CSS 来实现它：

#myrect {
    fill: #800000;
}

#myrect:hover {
    fill: #008000;
}

css 示例：http: //fiddle.jshell.net/7dcnZ/2/

当然，JavaScript 也是一种选择：

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

JavaScript 示例：http: //fiddle.jshell.net/7dcnZ/3/

于 2014-03-28T15:57:28.913 回答