使用javascript向svg对象添加按钮

我正在使用nvd3用javascript构建一个图形，需要添加几个自定义按钮

使用d3，我似乎只有一个append对象。在我当前的设置中，self.selector是一个svg元素

d3.select(self.selector).insert("button")

我考虑了几个选项：

• 以self.selectors为目标并插入html元素以进行切换
• 以svg为目标，插入一些我可以使用javascript访问的svg按钮
• 使用其他一些原生js方法在svg之前插入我想要的hmtl元素

---

这些方法有什么优点或缺点吗？我在这个项目中不使用jQuery。

您不能将HTML按钮元素添加到SVG，SVG容器（SVG和g）不能容纳按钮。您可以将foreignObject添加到SVG画布（或g元素），该画布可以容纳按钮，但IE中不支持SVG:foreignObject。

我建议添加SVG形状，使用CSS将其样式设置为您想要的按钮，并注册和事件侦听器。

---

这很好，而且是最干净的方法。

我可以用与任何“常规”元素相同的方式向svg添加事件侦听器吗？如果您使用的是

d3

，为什么不只用于事件？是的，工作方式相同。或者正如Mark指出的，有一条特定于框架的捷径。我只是在一个项目中经历了这一点。我最初的方法是使用html输入，

d3.select（'body'）。append

，然后绝对地将它们放在svg上。不过，我发现HTML元素与SVG元素的不同之处令人痛苦。因此，我最终采用了@Marcel推荐的方法

d3

创建了SVG元素，这些元素的样式看起来像是奇特的输入。