使用 Raphael 动画不透明度

Posted 2023-03-28

【中文标题】使用 Raphael 动画不透明度

【英文标题】：Animating opacity with Raphael

【发布时间】：2018-05-27 23:38:03

【问题描述】：

我成功地制作了一个小地图，在鼠标悬停时显示 .SVG。它立即显示图像，然后离开鼠标。我尝试添加“.animate”属性以使它们淡入淡出，但我尝试过的每一种方式都失败了？希望得到一个快速的解释！

var rsr = Raphael('map', '900', '900');

变量区域 = [];

var circle_a = rsr.circle(584, 556, 88); circle_a.attr(fill: '#2a4b4d',opacity: '0').data('id': 'circle_a', 'region': 'Circle A'); region.push(circle_a);

for (var i = 0; i

regions[i].mouseover(function(e)
  this.node.style.opacity = 1;
);

regions[i].mouseout(function(e)
    this.node.style.opacity = 0;
);

【问题讨论】：

那是什么 .animate 属性？你能用它创建一个minimal reproducible example 吗？

【参考方案1】：

regions[i].mouseover(function(e)
  circle_a.animate( "fill-opacity": "1" , 2000);
    document.getElementById('region-name').innerhtml = this.data('region');
);

regions[i].mouseout(function(e)
circle_a.animate( "fill-opacity": "0" , 2000);
);

【讨论】：

我一遍又一遍地尝试“不透明度”。但后来我将我的 svg 上的填充不透明度设置为 0（而不是不透明度）。然后动画填充不透明度。一切正常！哇哦。