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

Question

我有一张工作国家/地区地图，其中包含动画填充点击和悬停的区域。每条路径都是单独工作的。

我想添加一个Select All / Clear All选项，将点击效果应用于所有路径。 我用

创建了一个新的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ëlset之后需要更改的路径，然后只需在点击时更改set上的填充。