Question

我想在我的SVG中创建弹出窗口div并向div添加按钮。我在SVG中创建foreignObject并向该foreignObject添加按钮。我正在尝试调用java脚本功能使用click事件上的按钮。但在foreignObject按钮内部不提供其功能。

.on('mouseover', function() {
    var trashfuntion = function(){
        console.log("click")
    }
                var fo = svg.append('foreignObject')
                    .attr({
                        'x': anchor.w - tip.w,
                        'y': anchor.h + tip.h,
                        'width': foWidth,
                        'class': 'svg-tooltip'
                    });
                var div = fo.append('xhtml:div')
                    .append('div')
                    .attr({
                        'class': 'tooltip'
                    });
                div.append('div')
                    .attr('class', 'lead')
                    .html('<button onclick="trashfuntion()">Click Me</button>' );

Answer 1

这对我有用：

<svg id="mySvg"></svg>
<script>
var svg = d3.select("#mySvg")
var fo = svg.append('foreignObject')
  .attr({
  'x': 20, //anchor.w - tip.w,
  'y': 20, //anchor.h + tip.h,
  'width': 220,//foWidth,
  'class': 'svg-tooltip'
  });
 var div = fo.append('xhtml:div')
   .append('div')
   .attr({
   'class': 'tooltip'
    });
 div.append('div')
    .attr('class', 'lead')
    .html('<button onclick="trashfuntion()">Click Me</button>' );

 function trashfuntion() {
     console.log("click")
 }
</script>

尝试其他浏览器。

Edge 25.1不起作用。甚至渲染按钮。
你告诉我Chrome既不
我正在使用Opera 38并且效果很好

显然这是一个依赖于浏览器的实现。你需要一些解决方法.-

在

如何在d3 SVG中向foreignObject添加按钮

1 个答案: