Question

我有一个由多个路径组成的SVG对象。对于这些路径中的每一个，JavaScript函数都附加到＆＃34; onmouseout＆＃34;事件。如下所示：

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

使用JavaScript

1 个答案: