交互式SVG：更改填充颜色onMouseOver

Question

我目前正在使用Addobe Illustrator CC中的图像映射，我希望能够更改onMouseOver形状的颜色。在我的SVG Interactivity面板中试过这个：

style.fill="yellow" 

它似乎不起作用。为onMouseOver设置适当的函数是什么？

我的onClick事件链接到网站确实有用。那是：

location.href='https://thecleverroot.com/tag/southwest/';

Answer 1

如果您只需更改样式，则可以使用CSS for SVG。将类名添加到所需元素，并将以下代码放入CSS文件：

.className {
  color: yellow;
}

.className:hover {
  color: blue;
}

如果要将用户重定向到另一个URL onClick，则无需使用JavaScript。您可以将锚元素添加到SVG并将href放在那里。这个方法有nice article。

如果您希望在点击使用时设置元素样式：

.className:active {
  color: red;
}

仅当您的SVG应该有一些复杂的逻辑时才使用JavaScript。

Answer 2

好的，我找到了解决方案。最初，Illustrator为我的组中的每个形状分配了填充样式，而不是组本身。一旦我将CSS中的填充引用更改为我的组中的填充引用而不是每个单独的路径，我解决了问题，并且现在悬停在没有JS的情况下工作得很好。