javascript - 我的元素foreignObject 未显示

Question

我试图在 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/

Answer 1

您必须在外部 html 前面加上 xhtml 前缀，如下所示 .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/