使用javascript向svg-object添加按钮

Question

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

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

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

我考虑了几个选项：

• 将self.selectors指向父级并插入html元素以便以此方式切换。
• 定位svg并插入一些我可以使用javascript访问的svg按钮。
• 使用其他一些原生js方法在svg之前插入我想要的hmtl元素。

是否有任何赞成或赞成任何一种方法？我不在这个项目中使用jQuery。

Answer 1

我建议添加SVG形状，用CSS设置样式，看起来像你想要的按钮，注册和事件监听器。 这很好，是最干净的方法。

Answer 2

您无法向SVG添加HTML按钮元素，SVG容器（svg和g）无法保存按钮。您可以将foreignObject添加到SVG画布（或g元素），它可以保存按钮但是svg：IE中不支持foreignObject。