javascript - 我的元素foreignObject未显示

我正在尝试在SVG内添加一个foreignObject，但未显示。它被添加到SVG内部。为什么会发生这种情况，我该如何解决？

 body = d3.select('body')
 svg = body.append('svg').attr('height', 600).attr('width', 600)

 var div= svg.append('foreignObject')
 .attr("width",50)
 .attr('height',50)
 .append("div")
 .attr("class", "tooltip")
 .style("opacity", 1);
  div.append('img')
 .attr("id", "img_tweet").attr("src", "")
 .attr("class", "imagen_tweet");
 div.append('div').attr("id", "texto_tweet");

document.getElementById('img_tweet').src="https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg";
document.getElementById('texto_tweet').innerHTML='message'

https://jsfiddle.net/tzp3oe5a/

最佳答案

您必须像xhtml这样在外部html前面加上.append("xhtml:div")前缀
您可以在此处using foreignObject to add SVG dynamically using D3js阅读更多有关说明的信息。

     body = d3.select('body')
     svg = body.append('svg').attr('height', 600).attr('width', 600)

     var div= svg.append('foreignObject')
     	.attr("width", 50)
    	.attr("height", 50)
     .append("xhtml:div")
     .attr("class", "tooltip")
     .style("opacity", 1);
      div.append('img')
     .attr("id", "img_tweet").attr("src", "https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg")
     .attr("class", "imagen_tweet");
     div.append('div').attr("id", "texto_tweet");

    //document.getElementById('img_tweet').src="https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg";
    document.getElementById('texto_tweet').innerHTML='message'

      div.tooltip {
        position: absolute;
        top:14px;
        left: 62px;
        text-align: center;
        width: 100px;
        height: 40px;
        padding: 2px;
        font: 12px sans-serif;
        background: white;
        border-radius: 8px;
        pointer-events: none;
        z-index: 999999;
      }

      .imagen_tweet{
        width: 20px;
        height: 20px;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>

工作jsfiddle https://jsfiddle.net/azs06/tzp3oe5a/2/

关于javascript - 我的元素foreignObject未显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45762193/