使用 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 制作它。

<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")
}

<style>
 .fade {
    -webkit-transition: fill-opacity 1s; /* Safari */
    transition: fill-opacity 1s;
}

</style>
<svg>
  <circle cx="50" cy="50" r="45" fill="blue" stroke="darkblue" stroke-width="8" onmouseover="m_over(evt)" onmouseout="m_out(evt)"/>
</svg>