jQuery 选择所有 SVG 路径并应用动画填充

Question

我有一张可用的国家地图，其中包含在点击和悬停时动画填充的区域。每条路径单独运行。

我想添加一个全选/清除所有选项，将点击效果应用到所有路径。 我用

创建了一个新的div

<div id="selectAll">Click to Select All</div>

然后用一些 jQuery

$('#selectAll').click(function(){
  $("[id^=Co]").animate({
         fill: '#698B22'
         }, 300);
});

选择器 "[id^=Co]" 可以访问所有路径，因为它们的所有 id 都以“Co”开头。这个选择器还可以完美地与我的每个区域的 qtip 配合使用。

我不确定我在这里做错了什么。任何指导都会有很大帮助。 tia

Answer 1

添加 jquery.color 插件，然后在您的代码之前添加：

  jQuery.Color.hook( "fill stroke" );

那么你原来的动画功能就可以工作了

$('#selectAll').click(function(){
  $("[id^=Co]").animate({
         fill: '#698B22'
         }, 300);
});

Answer 2

在您的选择操作中，您必须以某种方式获取 raphaël 对象才能使用 raphaël 的动画功能。不确定这是否可能。

但是您可以创建一个 raphaël set 来包含稍后需要更改的路径，然后只需在点击时更改该 set 的填充。