如何在svg-objects中存储自定义数据？
我打算在svg-object中有一些（很多）对象，这些对象将使用JavaScript生成。
用户将使用它们执行不同的活动：单击，鼠标hover，鼠标移出。 一旦发生任何事件，就需要显示一些特定于对象的数据。
问题：如何获取有关对象的数据？ 例如，用户点击代表“Make A”的汽车的矩形（有几个矩形，每个矩形代表一个单独的品牌）。 我如何确定制作？ 有没有办法将“外部数据”与svg-objects关联起来？
你能不在jquery.data对象中存储东西吗？
您在click / mouseover / etc-handler中获得的Event对象有一个名为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")) }
您可以存储对在简单javascript变量中创建的SVG对象的引用。 因此，在创建形状时，可以执行以下操作：
myRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
现在您可以参考SVG对象的形状。 但是如果你想让它们互动，你只需要像这样向对象添加属性。
myRect.setAttribute("onclick", "jsFunc()");
其中jsFunc（）是先前定义的函数。 此外，为了简化操作，您可以通过以下方式设置事件：
myRect.onclick = function(){jsFunct(this, otherArg);}
现在你不仅可以引用变量，而且可以通过使用指针将变量本身传递给函数jsFunc。
如果必须创建大量Rectangle，可以将它们全部存储在一个Array中，这样您就可以使用索引访问每个元素：
myRect = new Array(); for(i = 1; i <= numMakes; i = i + 1){ myRect[i] = document.createElementNS("http://www.w3.org/2000/svg", "rect"); }
请记住，要获取对象的属性或属性，可以使用函数getAttribute，如下所示：
fillColor = myRect.getAttribute("fill"); x = myRect.getAttribute("x");
等等。
您可以创建一个新的变量类型对象，并确定一个成员是svg形状，其余成员是您的自定义数据字段。
var myRect = new Object(); myRect.shape = document.createElementNS("http://www.w3.org/2000/svg", "rect"); myRect.customField = myValue;
虽然通常不安全地假设可以使用js expando属性扩展本机对象，但在所有浏览器SVG实现中，使用常规expando属性将数据存储在SVG DOM节点上是安全的，例如
node.myCustomData = "foo"
请注意，这在Batik中不起作用。
您可以阅读这些主题以获取更多信息：
http://tech.groups.yahoo.com/group/svg-developers/message/64659
http://tech.groups.yahoo.com/group/svg-developers/message/63002
您可以使用自定义标记或属性将自定义数据存储在SVG中 – 只需确保使用自己的命名空间：
我自己看到一个解决方案：在使用项目填充svg-object期间，我可以为每个项目生成“id” ，如下所示：“makeA”，“makeB”，“car_id_10”，“bike_id_20”，……等等事件监听器我将获得事件目标id，进入一个描述对象的特殊数组……
这是个好主意吗？ 不确定…
DOM元素可以在属性中存储任意对象，而不仅仅是您可以在“普通”html代码中输入的字符串。
someSVGElement.setAttribute("myApp.car.model", Global.Car.Models.mercedes");
另外，从jquery 3开始，jquery在svg元素上支持其.data（…）方法（ https://api.jquery.com/jquery.data/ ）