Geek asks and answers

SVG foreignObject not showing up in Chrome

I have an SVG element with a foreignObject that contains a div. Then in my js I do this:

$("#wrapper>svg>foreignObject>div").sparkline(data);

which creates the canvas inside the div. When I look at the firebug html code for two browsers:

Firefox:

<svg>
    <foreignObject width="20" height="20" x="10" y="-10">
       <div>
          <canvas style="display: inline-block; width: 18px; height: 19px; vertical-align: top;" width="18" height="19"></canvas>
       </div>
    </foreignObject>
</svg>

Chrome:

<svg>
    <foreignobject width="20" height="20" x="10" y="-10"/>
<svg>

In chrome, it doesn't even show a div. The way to create a div is

nodeEnter.append("foreignObject")
  .attr("width", "20")
  .attr("height", "20")
  .attr("x", "10")
  .attr("y","-10");

$("#wrapper>svg>foreignObject").append("<div></div>");

Firefox works the way I expect it to work. But chrome does not. Anyone have any suggestions?

Also, I think part of the problem is that chrome firebug HTML output shows “foreignobject”, but Firefox shows “foreignObject” as I added.

+5
source share
2 answers

, HTML foreignobject. , - .

+4

, . Chrome Firefox -, ( html reset?). , -, HTML , xmlns , body div. , , , svg switch, .

<!doctype html><html><body>

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="300px">
  <foreignObject width="100" height="57">
    <div xmlns="http://www.w3.org/1999/xhtml" style="position:relative;
         width:100px;height:57px;overflow:hidden;font-family:Arial;
         font-weight:400;font-size:12px;line-height:100%;">
           Lorem ipsum dolor sit amet, consectetur adipiscing egplit, sed do eiusmod
           tempor incididunt ut labore
    </div>
  </foreignObject>
</svg>

</body></html>
+1

More articles:


All Articles