javascript 如何在 svg-objects 中存储自定义数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6012687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to store custom data inside of svg-objects?
提问by Budda
I plan to have some (a lot of) objects inside of svg-object that will be generated using JavaScript.
我计划在 svg-object 中有一些（很多）对象，这些对象将使用 JavaScript 生成。
User will do different activities with them: click, mouse-over, mouse-out. Once any event is occurred some data that are object specific are required to be displayed.
用户将使用它们进行不同的活动：单击、鼠标悬停、鼠标移开。一旦发生任何事件，就需要显示一些特定于对象的数据。
Question:how to get data about object? For example, user clicked on rectangle that represents car of "Make A" (there are few rectangles, each of them represents a separate make). How can I determine a make? Is there any way to associate 'external data' with svg-objects?
问题：如何获取对象的数据？例如，用户点击代表“Make A”汽车的矩形（矩形很少，每个矩形代表一个单独的品牌）。如何确定品牌？有没有办法将“外部数据”与 svg 对象相关联？
采纳答案by locrizak
Can you not store things within the jquery.dataobject?
你不能在jquery.data对象中存储东西吗？
回答by Erik Dahlstr?m
The Eventobject you get in the click/mouseover/etc-handler has a property called targetthat is the element (technically any EventTarget, but in this case it's the element) that the event was first dispatched to.
您在 click/mouseover/etc-handler 中获得的Event对象有一个称为target该元素的属性（技术上是任何 EventTarget，但在本例中它是该元素），该事件首先被分派到。
One way to store custom data is to use namespaced attributes. The reason why you should namespace your attributes is that they may clash with existing or future svg attributes.
存储自定义数据的一种方法是使用命名空间属性。您应该命名属性的原因是它们可能与现有或未来的 svg 属性发生冲突。
Here's an example:
下面是一个例子：
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"))
}
回答by Jesufer Vn
You can store a reference to a SVG object created in a simple javascript variable. So, when you create a shape, you can do this:
您可以存储对在简单 javascript 变量中创建的 SVG 对象的引用。所以，当你创建一个形状时，你可以这样做：
myRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
Now you have the reference to a shape of the SVG object. But if you want to make them interactive, you just have to add attributes to the object like this.
现在您有了对 SVG 对象形状的引用。但是如果你想让它们交互，你只需要像这样向对象添加属性。
myRect.setAttribute("onclick", "jsFunc()");
where jsFunc() is a previously defined function. Also, to make things easier, you can set the events this way:
其中 jsFunc() 是先前定义的函数。此外，为了简化操作，您可以通过以下方式设置事件：
myRect.onclick = function(){jsFunct(this, otherArg);}
Now You can not only have the reference to the variable, but to pass the variable itself to the function jsFunc using such alternative through the use of the pointer this.
现在，您不仅可以拥有对变量的引用，还可以通过使用 this 指针将变量本身传递给使用这种替代方法的函数 jsFunc。
If you have to create a lot of Rectangles, you can store them all in a single Array, so you are able to access each element using an index:
如果您必须创建很多 Rectangles，您可以将它们全部存储在一个 Array 中，这样您就可以使用索引访问每个元素：
myRect = new Array();
for(i = 1; i <= numMakes; i = i + 1){
myRect[i] = document.createElementNS("http://www.w3.org/2000/svg", "rect");
}
Remember, to get a property or attribute of your object, you can use the function getAttribute, like this:
请记住，要获取对象的属性或属性，可以使用函数 getAttribute，如下所示：
fillColor = myRect.getAttribute("fill");
x = myRect.getAttribute("x");
and so on.
等等。
You could create a new variable type object, and establish that one member is the svg shape, and the rest of members are your customized data fields.
您可以创建一个新的变量类型对象，并确定一个成员是 svg 形状，其余成员是您自定义的数据字段。
var myRect = new Object();
myRect.shape = document.createElementNS("http://www.w3.org/2000/svg", "rect");
myRect.customField = myValue;
回答by jbeard4
While generally not safe to assume that it's possible to extend native objects with js expando properties, in all browser SVG implementations, it's safe to store data on SVG DOM nodes using regular expando properties, e.g.
虽然假设可以使用 js expando 属性扩展本机对象通常是不安全的，但在所有浏览器 SVG 实现中，使用常规 expando 属性将数据存储在 SVG DOM 节点上是安全的，例如
node.myCustomData = "foo"
Note that this doesn't work in Batik.
请注意，这在蜡染中不起作用。
You can read these threads for more information:
您可以阅读这些主题以获取更多信息：
http://tech.groups.yahoo.com/group/svg-developers/message/64659
http://tech.groups.yahoo.com/group/svg-developers/message/64659
http://tech.groups.yahoo.com/group/svg-developers/message/63002
http://tech.groups.yahoo.com/group/svg-developers/message/63002
回答by johndodo
You can store your custom data inside SVG by using custom tags or attributes - just make sure you use your own namespace:
您可以使用自定义标签或属性将自定义数据存储在 SVG 中 - 只需确保使用您自己的命名空间：
回答by Jay Day Zee
DOM Elements may have arbitrary objects stored in attributes, not just strings as you might enter in "normal" html code.
DOM 元素可能具有存储在属性中的任意对象，而不仅仅是您可能在“普通”html 代码中输入的字符串。
someSVGElement.setAttribute("myApp.car.model", Global.Car.Models.mercedes");
Additionally, as of jquery 3, jquery supports its .data(...) method (https://api.jquery.com/jquery.data/) on svg elements
此外，从 jquery 3 开始，jquery在 svg 元素上支持其 .data(...) 方法（https://api.jquery.com/jquery.data/）
回答by Budda
I see one solution myself: during populating svg-object with items I can generate 'id'for each item in way like this: "makeA", "makeB", "car_id_10", "bike_id_20", ... etc. And in the event listener I will get event target id, go into a special array that will describe objects...
我自己看到了一个解决方案：在用项目填充 svg-object 期间，我可以以如下方式为每个项目生成“id”：“makeA”、“makeB”、“car_id_10”、“bike_id_20”等。在事件侦听器我将获得事件目标 id，进入一个将描述对象的特殊数组......
Is it a good idea? Not sure...
这是个好主意吗？不确定...
