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/

我的元素foreignObject未显示

1 个答案: