使用JavaScript在SVG元素上实现填充透明度动画效果

Question

使用JavaScript在SVG元素上实现填充透明度动画效果

5

我有一个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"); }

我希望能够将透明度从0.3渐变到1.0，动画时间为1秒。目前这个过渡几乎是瞬间完成的。

理想情况下，我希望能够使用与上面列出的代码类似的代码来实现这个效果。

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

- markthekoala

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Holger Will · Accepted Answer

您可以将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>