jquery - 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 配合使用。

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

score 3 · Accepted Answer

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

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

那么您的原始动画功能将起作用

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

score 2 · Accepted Answer

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

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

2 回答 2