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

Question

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

<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"/>

当用户将鼠标悬停在该元素上时，不透明度将设置为 0.3（函数未显示）。当用户的鼠标离开此元素时，不透明度将重置为 1.0。实现这一点的函数如下所示：

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

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

理想情况下，我想使用类似于上面列出的代码来实现此目的。

我应该从哪里开始...？

Answer 1

您可以将 css 过渡添加到样式表中

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

有了这个，你甚至可以用纯 css 来制作它。

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

如果您希望转换仅以一种方式工作（即仅在鼠标悬停或鼠标悬停时），您可以使用类选择器并根据需要添加或删除类。

<style>
 circle {
    -webkit-transition: fill-opacity 1s; /* Safari */
    transition: fill-opacity 1s;
}
  circle:hover {fill-opacity:0.1}
</style>
<svg>
  <circle cx="50" cy="50" r="45" fill="blue" stroke="darkblue" stroke-width="8"/>
</svg>

function m_over(evt){
evt.target.setAttribute("fill-opacity","0.2")
evt.target.removeAttribute("class")
}
function m_out(evt){
evt.target.setAttribute("fill-opacity","1")
evt.target.setAttribute("class","fade")
}