CODEWITHSUNDEEP
javascriptsvgd3.js
Nick Malawskey
Nick Malawskey

Reputation: 51

SVG foreignObject text not appearing in mobile browsers

trying to use D3 & foreignObject to insert wrapping text into an svg. Text displays in desktop browsers, but not in mobile browsers.

Live spot:

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

Bin:

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

Any ideas what I'm missing? I'm guessing it's something simple and stupid.

Upvotes: 1

Views: 830

Answers (2)

Nick Malawskey
Nick Malawskey

Reputation: 51

haha yeah :-) but I think it also has to do with a missing 'xhtml' declaration. The following code works correctly:

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>');

Upvotes: 1

Nick Malawskey
Nick Malawskey

Reputation: 51

Okay, it seems to be something in the way D3 is calling the ForeignObjects, as an in-line foreignObject appears to load correctly in a mobile browser. I.E.:

<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>

as opposed to: 

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");

So maybe I'll just work around it that way.

Upvotes: 0

Related Questions