IE8 中 RaphaelJS 节点上的自定义属性答案

【问题标题】：Custom attributes on RaphaelJS nodes in IE8IE8 中 RaphaelJS 节点上的自定义属性
【发布时间】：2012-01-30 13:47:43
【问题描述】：

我有一个像这样的脚本，它在 RaphaelJS 中将一个基本矩形添加到纸对象，然后在矩形上设置一些自定义属性：

var furniture = paper
  .rect(0, 0, 100, 200)
  .attr({
    fill: '#ccc'
  })
;


furniture.node.id = 'some-id';
$(furniture.node).attr('class','draggableFurniture');
$(furniture.node).attr('productId','1234');
$(furniture.node).attr('title','Some title');
$(furniture.node).attr('price','123.99');

这在 IE9 和 Firefox/Chrome 等中效果很好，但在 IE8 或 7 中不起作用，大概是因为这些浏览器使用 VML 而不是 SVG，并且大概 VML 没有能够像这样使用的 DOM 结构SVG。

我想知道如何将我的自定义属性在所有浏览器（至少包括 IE8 和 7）中一致地添加到这些对象中？

谢谢各位！

【问题讨论】：

标签： internet-explorer-8 raphael custom-attributes vml

【解决方案1】：

排序！ Raphael API 中有一个名为“data”的方法 (http://raphaeljs.com/reference.html#Element.data)，它允许为纸上的每个项目设置自定义键/值对。虽然它不接受项目数组，但可以多次调用此方法，因此可以通过这种方式添加每个属性。可以在这里看到一个例子：http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2&q=element.data#pagetop

【讨论】：

【解决方案2】：

我认为最好的方法是使用 Raphael 的 getById()。您可以分配一个内部 ID。在这里，我已经回答了一个问题，您有一个如何做的例子。

adding ID's to raphael objects

再见！

【讨论】：

谢谢，但这不会设置 id，也不会处理任何其他自定义属性。我还不能将其标记为解决方案，但我的第二篇文章是我正在寻找的解决方案 - 对每个自定义属性使用“数据”方法。所有测试和工作完美。无论如何，谢谢。
不，这就是通过 ID 获取元素的方式，您可以按照我建议您阅读的帖子中所示的方式进行设置：element.id = 'Idofelement'。获得该 ID 后，您将使用 getById('Idofelement') 获得元素。虽然类似于使用数据，但更直接。