Question

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

用户将与他们进行不同的活动：点击，鼠标悬停，鼠标移除。一旦发生任何事件，就需要显示一些特定于对象的数据。

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

Answer 1

您在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"))
}

Answer 2

您可以存储对在简单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。

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

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;

Answer 3

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

Answer 4

虽然通常不安全地假设可以使用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

Answer 5

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

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

Answer 6

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

这是个好主意吗？不确定......

Answer 7

DOM元素可以在属性中存储任意对象，而不仅仅是您可能输入的字符串＆＃34; normal＆＃34; HTML代码。

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

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

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

7 个答案: