交互式SVG：在MouseOver上更改填充颜色

Question

我目前正在使用Addobe Illustrator CC处理图像映射，并且希望能够更改onMouseOver上的形状的颜色。 在我的SVG交互面板中对此进行了尝试：

style.fill="yellow" 

而且似乎不起作用。 在那里放置onMouseOver的适当功能是什么？

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

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

Answer 1

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

.className {
  color: yellow;
}

.className:hover {
  color: blue;
}

如果要将用户重定向到另一个URL onClick，则无需使用JavaScript。 您可以将锚元素添加到SVG并在其中放置href。 这是一篇有关此方法的不错的文章 。

如果您希望在单击时为元素设置样式，请使用：

.className:active {
  color: red;
}

仅在SVG具有某些复杂逻辑的情况下才使用JavaScript。

Answer 2

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