使用 javascript 向 svg-object 添加按钮

Add buttons to svg-object with javascript

本文关键字：添加 按钮 svg-object javascript 使用      更新时间：2023-09-26

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

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

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

我考虑了几种选择：

    以
  • self.选择器父级为目标，并插入 html 元素以这种方式切换。
  • 以 svg 为目标并插入某种我可以使用 javascript 访问的 svg 按钮。
  • 使用其他一些本机 js 方法在 svg 之前插入我想要的 hmtl 元素。

这些方法是否有任何优点或缺点？我在这个项目中不使用jQuery。

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

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

相关文章：