使用JavaScript在SVG元素上设置填充不透明度动画

我有一个SVG对象，它由多个路径组成。对于这些路径中的每个路径，“onmouseout”事件都附加了一个JavaScript函数。如下所示：

<path id="AUK" style="fill:#00A600;" onmouseover="m_over(this.id);" onmouseout="m_out(this.id);" d="M142.3397,326l-8.66,-15l8.66,-15h17.32l8.66,15l-8.66,15H142.3397z"/>

function m_out(hover_id) { 
document.getElementById(hover_id).setAttribute("fill-opacity", "1.0"); }

我想在1秒内将不透明度从0.3淡入（或设置动画）到1.0。目前，这种转变（几乎）立即发生

理想情况下，我希望使用类似于上面列出的代码来实现这一点

---

我应该从哪里开始…？

您可以将css转换添加到样式表中

#AUK{
    -webkit-transition: fill-opacity 1s;
    transition: fill-opacity 1s;
}

有了它，你甚至可以在纯css中创建它

圈{
-webkit转换：填充不透明1s；/*Safari*/
过渡：填充不透明度1s；
}
圆形：悬停{填充不透明度：0.1}

非常感谢您的回复。我使用了你提供的代码，得到了圆圈淡入淡出的填充。但我真正想做的是将转换（即淡入淡出）限制为“mouseout”事件。这意味着：当用户将鼠标悬停在SVG元素上时，填充不透明度会立即调整。但是当用户离开元素时…不透明度将转换回其原始值。我用第二个代码示例扩展了答案，该示例演示了如何选择使用转换。非常感谢。我们已经对此进行了测试。很好的解决方案。帮助很大。