如何在svg-objects中存储自定义数据？

Question

我打算在svg-object中有一些(很多)对象,这些对象将使用JavaScript生成.

用户将使用它们执行不同的活动:单击,鼠标悬停,鼠标移除.一旦发生任何事件,就需要显示一些特定于对象的数据.

问题:如何获取有关对象的数据？例如,用户点击代表"Make A"的汽车的矩形(有几个矩形,每个矩形代表一个单独的品牌).我怎样才能确定品牌？有没有办法将"外部数据"与svg-objects关联起来？

Answer 1

您在click/mouseover/etc-handler中获得的Event对象有一个名为property的属性target(在技术上是任何EventTarget,但在这种情况下它是元素),该事件首次被调度到该元素.

存储自定义数据的一种方法是使用命名空间属性.您应该为属性命名空间的原因是它们可能与现有或未来的svg属性冲突.

这是一个例子:

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttributeNS("http://www.example.com/yourcustomnamespace", "data", "whatever-data-you-want-here");
rect.addEventListener("click", myclickhandler, false);
...

function myclickhandler(evt)
{
  var target = evt.target;
  // specialcase for use elements
  if (target.correspondingUseElement)
    target = target.correspondingUseElement;
  alert(target);
  alert(target.getAttributeNS("http://www.example.com/yourcustomnamespace", "data"))
}

Answer 2

你不能在jquery.data对象中存储东西吗？