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

Posted 2023-02-23

【中文标题】jQuery 选择所有 SVG 路径并应用动画填充

【英文标题】：jQuery select all SVG paths and apply animate fill

【发布时间】：2012-06-16 09:08:40

【问题描述】：

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

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

创建了一个新的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

【问题讨论】：

animate 函数无法识别fill 效果。你在使用一些插件还是什么？如果需要动画颜色，需要jQuery Color插件：github.com/jquery/jquery-color

对不起，我应该提到：是的，我正在使用 raphael.js，目前悬停在 obj.hover(function()this.animate(fill: '#32CD32', 300);,etc 上。我正在尝试找到一些选择所有 obj 的方法

【参考方案1】：

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

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

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

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

【参考方案2】：

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

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

【讨论】：

我最终是如何让所有区域改变颜色的：$('#selectAll').click(function() $("#map path").attr(fill: '#698B22'); 虽然没有动画，但我会活着......我与 Raphael Mayo: name: 'Mayo',value: 'notSelected',path: 'm85.529,143.84497c-0.271,0.01599z', 等一起使用的路径示例（截断显示) 单击路径时，值 notSelected 更改为 isSelected 并带有 paths[arr[this.id]].value = "isSelected";，这样我就可以控制悬停是否应该改变颜色。

因此，当单击 div selectAll' 时，所有路径都应该改变颜色，并且它们的所有值都应该设置为 isSelected。我对 json 还很陌生，虽然我已经使用 XML 用 Ja​​va 构建了一个完整的信使应用程序，但我不熟悉 jQuery 和解析 json。我尝试使用 for 循环但没有运气。我想也许我已经盯着这个 SVG/Raphael 任务太久了:)

请注意，如果您像这样使用 jQuery 执行此操作，它可能无法在旧 IE 版本（使用 VML 的版本）中正确显示。基本上我要说的是：除非您确定只需要支持支持 SVG 的浏览器，否则混入 jQuery 是个坏主意。如果你确定你可以要求 SVG，那么d3js.org 更接近你想要的，因为它不会像 Raphaël 那样隐藏 svg 元素，而且它与 jQuery 相似，选择器是一个核心概念。

非常感谢您提供的链接，非常感谢。我有这个我正在处理的旧示例danu2.it.nuigalway.ie/09101916/trazoo/demo_1，它确实可以在 IE6 上运行，尽管速度很慢。我也不能使用toFront()... 即使在 IE9 上。