Question

我正在使用维基媒体公共标准空白地图6 svg。我添加了一个语言列表，我试图使其成为当我将鼠标悬停在一种语言上时，相应的国家会亮起，改变颜色，或以某种方式表明它们被“选中”。这是我正在使用的代码。

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

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

无论是否使用或任何其他方法，我都无法让svg更改已定义的属性。这意味着，如果我从其中一个中删除了fill =“＃E0E0E0”属性，我可以让它工作（然后默认为黑色而不是灰色，这不符合我正在处理的网站的样式），但如果已经包含fill =属性，它将不会按照标记的指示进行更改。我也尝试删除fill =“＃E0E0E0”并在样式表中定义它 - 同样的问题。

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

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

Answer 1

如果你将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/

如何使用set标签重新定义SVG中的填充属性？我以为我知道，但是

1 个答案: