Interactive SVG：更改填充顏色onMouseOver

Question

我目前正在研究Addobe Illustrator CC中的圖像，我希望能夠更改onMouseOver上的圖像顏色。嘗試在我的SVG交互性面板：

​​

它似乎並沒有工作。在那裏放置onMouseOver的功能是什麼？

我的onClick事件鏈接到網站確實工作。那是：

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

Answer 1

如果你只需要改變樣式，那麼你可以使用CSS for SVG。添加類名所需的元素，下面的代碼放置到你的CSS文件：

.className { 
    color: yellow; 
} 

.className:hover { 
    color: blue; 
} 

如果你想將用戶重定向到另一個網址的onClick

，也沒有必要使用JavaScript。您可以將錨元素添加到您的SVG並將其放置在那裏。這是一種nice article這種方法。

如果你希望的風格元素，同時點擊使用：

.className:active { 
    color: red; 
} 

使用JavaScript只有當你的SVG應該有一些複雜的邏輯。

Answer 2

好的，我找到了一個解決方案。最初，Illustrator將填充樣式分配給我的組中的每個形狀，而不是組本身。一旦我將CSS中的填充引用更改爲我的組中的填充引用，而不是每個單獨的路徑，我都解決了這個問題，現在懸停在沒有JS的情況下工作得很好。