使用 javascript 将按钮添加到 svg-object

Question

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

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

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

我考虑了几个选项：

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

这些方法有 pro:s 或缺点吗？我在这个项目中没有使用 jQuery。

Answer 1

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

Answer 2

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