我有一个由多条路径组成的 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。目前,这种转变(几乎)立即发生。
理想情况下,我想使用类似于上面列出的代码来实现这一点。
我应该从哪里开始……?
最佳答案
您可以将 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 - 使用 JavaScript 在 SVG 元素上设置填充不透明度动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32684970/