Login/Register
SVG foreignObject not showing in Chrome
Asked Answered
Solved javascripthtmlfirefoxgoogle-chromejquery-svg
C

2

9

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

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

which creates a canvas within the div. When I look at the firebug html code for the two browser are:

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 doesnt even show the div. The way I create the div is 

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

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

Firefox is working as I am expecting it to work. But chrome does not. Does anyone have any suggestions?

Also, I think part of the problem is that the chrome firebug HTML output shows "foreignobject" but the Firefox shows "foreignObject" the way I appended.

Candie answered 25/6, 2012 at 17:38 Comment(0)
U
6

You need to have an HTML body be the sub-element of foreignobject. Once you have that you can put anything inside the body.

Unconnected answered 13/7, 2012 at 13:41 Comment(1)
May be worth updating this as Chrome appears to have changed its behavior and the sub-element now has to be <xhtml></xhtml> wrapped - strangely Edge doesn't care either way. No namespace is needed for either browsers (but others may still be picky). – Orator
B
3

Just to add to the conversation, here's some markup. Chrome and Firefox behave differently and these style tags removed the differences (add to html reset?) You apparently don't need an HTML body so much as the namespace reference xmlns on the tag, be it body or simply div. Also, you would probably want to consider an svg switch tag to test for supported features.

<!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>
Blakey answered 9/5, 2016 at 20:7 Comment(1)
I found the main issue with chrome only that the requiredExtensions attribute from foreignObject needed to be omitted. – Incoordination

© 2022 - 2024 — McMap. All rights reserved.