SVG foreignObject not showing in Chrome

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


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>

Tags:

Javascript

Html

Firefox

Google Chrome

Jquery Svg

Recent Posts