当前位置： 文江博客话题详情

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

发布于 2024-11-07 02:30:06 字数 237 浏览 0 评论 0原文

我计划在 svg-object 中放置一些（很多）对象，这些对象将使用 JavaScript 生成。

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

问题：如何获取对象的数据？例如，用户单击代表“Make A”汽车的矩形（矩形很少，每个矩形代表一个单独的品牌）。如何确定品牌？有什么方法可以将“外部数据”与 svg 对象关联起来吗？

原文

I plan to have some (a lot of) objects inside of svg-object that will be generated using 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?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（7）

为你拒绝所有暧昧 2024-11-14 02:30:06

您在 click/mouseover/etc 中获得的 Event 对象-handler 有一个名为 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"))
}

The Event object you get in the click/mouseover/etc-handler has a property called target that is the element (technically any EventTarget, but in this case it's the element) that the event was first dispatched to.

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.

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"))
}
回复 原文
最终幸福 2024-11-14 02:30:06

您可以存储对在简单 JavaScript 变量中创建的 SVG 对象的引用。因此，当您创建形状时，您可以执行以下操作：

myRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

现在您拥有对 SVG 对象形状的引用。但如果你想让它们具有交互性，你只需像这样向对象添加属性即可。

myRect.setAttribute("onclick", "jsFunc()");

其中 jsFunc() 是先前定义的函数。另外，为了让事情变得更简单，您可以这样设置事件：

myRect.onclick = function(){jsFunct(this, otherArg);}

现在您不仅可以引用变量，还可以通过使用指针 this 将变量本身传递给函数 jsFunc。

如果必须创建大量矩形，则可以将它们全部存储在一个数组中，这样您就可以使用索引访问每个元素：

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;

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:

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.

myRect.setAttribute("onclick", "jsFunc()");

where jsFunc() is a previously defined function. Also, to make things easier, you can set the events this way:

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.

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:

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:

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.

var myRect = new Object();
myRect.shape = document.createElementNS("http://www.w3.org/2000/svg", "rect");
myRect.customField = myValue;
回复 原文
—━☆沉默づ 2024-11-14 02:30:06

您不能在 jquery.data 对象中存储内容吗？

Can you not store things within the jquery.data object?

回复 原文
神经大条 2024-11-14 02:30:06

虽然假设可以使用 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

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.

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/63002

回复 原文
一个人的旅程 2024-11-14 02:30:06

您可以使用自定义标签或属性将自定义数据存储在 SVG 中 - 只需确保您使用自己的命名空间：

http://www.w3.org/TR/SVG/extend.html#ForeignNamespaces

You can store your custom data inside SVG by using custom tags or attributes - just make sure you use your own namespace:

http://www.w3.org/TR/SVG/extend.html#ForeignNamespaces

回复 原文
逆光下的微笑 2024-11-14 02:30:06

我自己看到一个解决方案：在用项目填充 svg-object 期间，我可以为每个项目生成“id”，如下所示：“makeA”，“makeB”，“car_id_10”，“bike_id_20”， ...等等。在事件监听器中，我将获取事件目标 id，进入一个描述对象的特殊数组...

这是一个好主意吗？没有把握...

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...

Is it a good idea? Not sure...

回复 原文
蹲墙角沉默 2024-11-14 02:30:06

DOM 元素可以在属性中存储任意对象，而不仅仅是您在“正常”html 代码中输入的字符串。

someSVGElement.setAttribute("myApp.car.model", Global.Car.Models.mercedes");

此外，从 jquery 3 开始，jquery 支持其 .data(...) 方法 (https://api .jquery.com/jquery.data/) 在 svg 元素上

DOM Elements may have arbitrary objects stored in attributes, not just strings as you might enter in "normal" html code.

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

回复 原文
~没有更多了~

关于作者

小梨窩很甜

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

遂心如意

文章 0 评论 0

5513090242

文章 0 评论 0

巷雨优美回忆

文章 0 评论 0

junpengz2000

文章 0 评论 0

13郎

文章 0 评论 0

qq_xU4RDg

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文