我的元素foreignObject不顯示

Question

我想添加一個SVG的外部對象，但它沒有顯示。它被添加到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

您有xhtml前綴外HTML這樣.append("xhtml:div") 你可以閱讀更多關於這裏的解釋​​

 body = d3.select('body') 
 
    svg = body.append('svg').attr('height', 600).attr('width', 600)  
 
     
 
    var div= svg.append('foreignObject') 
 
     \t .attr("width", 50) 
 
    \t .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/