Question

尝试使用D3＆amp; foreignObject将包装文本插入svg。文本显示在桌面浏览器中，但不在移动浏览器中显示。

现场点击：

https://s3.amazonaws.com/WorkMalawskey/charter_money.html

滨：

http://jsbin.com/hometutiqi/1/edit?html,output

我缺少什么想法？我猜它是简单而愚蠢的东西。

Answer 1

好吧，它似乎是D3调用ForeignObjects的方式，因为内联的foreignObject似乎在移动浏览器中正确加载。即：

<foreignObject x="60" y="60" width="180" height="180">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>
        <ul>
          <li><strong>WHY NOT WORKING??</strong></li>
        </ul>
      </div>
    </body>
  </foreignObject>

而不是：

var d1text2 = svg.append("foreignObject")
            .html("<center>WHY NOT WORKING??</center>")
            .attr("x", 10)
            .attr("y", 15)
            .attr("width", 170)
            .attr("height", 150)
            .attr("visibility", "hidden") 
            .attr("class","text3")
            .attr("fill", "black");

所以也许我会以这种方式解决它。

Answer 2

哈哈是啊:-)但我认为这也与失踪的＆＃39; xhtml＆＃39;宣言。以下代码正常工作：

var d2default = svg.append("foreignObject")
                    .attr({ 'x': 210, 'y': 15, 'width': 78, 'height': 55, 'class': 'text' });
                var div2d1 = d2default.append('xhtml:div')
                    .append('div');
                div2d1.append('p')
                    .html('<center><b>Fighting Chance Pa</b></center>');

SVG foreignObject文本未出现在移动浏览器中

2 个答案: