我目前正在尝试获得SVG rect(在html中嵌入的SVG)在悬停时逐渐消失。我注意到过渡非常跳跃，有时超出了过渡的开始和结束不透明度之间的值范围。
我正在使用Firefox。矩形的填充为纯红色(#FF0000)。默认情况下，其不透明度为0.1。悬停时，其不透明度为1。我拍了一段视频来记录这段时间的过渡过程。下面，我注意到了视频中各个点的rect的red值。矩形在黑色背景上，所以我认为矩形的red值应该代表矩形的整体不透明度。我是在假设过渡的预期行为是从r=~25(255 * 0.1)到r=255(255 * 1)的情况下操作的。实际上，过渡在r=23和r=234之间。我想这是我的视频拍摄软件的限制。不管怎样。
当鼠标悬停在矩形上时，会发生以下情况:
- 矩形以红色值23开始
- 悬停时，矩形立即消失，红色值为0
- 矩形渐变为红色值26
- 矩形跳转到红色值100
- 矩形淡出为红色值140
- rect跳转到最后的红色值234
当鼠标离开矩形时，会发生以下情况:
- 矩形淡出为红色值102
- 矩形跳转到红色值45
- 矩形淡出为红色值10
- 矩形跳转到最终的红色值23
我被两件事弄糊涂了。首先，为什么不透明度跳得这么高?我几乎没有其他程序在运行，所以我怀疑这是一个延迟问题。其次，为什么不透明度一直下降到10(就像在步骤9中那样)，而不是仅仅停止在23?我该如何解决这一切?
<html>
<head>
<title>Opacity transition test</title>
<style>
body > svg {
background: black;
}
#the-rect {
opacity: 0.1;
transition: opacity 1s linear;
}
#the-rect:hover {
opacity: 1;
}
</style>
</head>
<body>
<svg width="500" height="500">
<rect id="the-rect" x="0" y="0" width="250" height="250" fill="#FF0000"/>
</svg>
</body>
</html>
不透明度在Firefox中不是很好。
填充不透明度对你来说可能已经足够好了。
<html>
<head>
<title>Opacity transition test</title>
<style>
body > svg {
background: black;
}
#the-rect {
fill-opacity: 0.1;
transition: fill-opacity 1s linear;
}
#the-rect:hover {
fill-opacity: 1;
}
</style>
</head>
<body>
<svg width="500" height="500">
<rect id="the-rect" x="0" y="0" width="250" height="250" fill="#FF0000"/>
</svg>
</body>
</html>