Edit Question - KnowledgeHub

Title Body

I'm working with SVG in an HTML document. For some reason in Chrome, any content in any <foreignObject> element appears in the top left corner of the <svg> element's parent element; as though the <foreignObject> element was absolutely positioned or something. I don't have this problem in Firefox. What could be causing this? How can I fix it? Here is my test case: ( the example is also on JsFiddle ) <!DOCTYPE html> <html> <head> <title>SVG bug in Chrome?</title> <style type="text/css"> code { background: #FFFAEE; } pre code { display:block; } .widget-body { background:yellow; position: relative; /* This is the problem! */ } </style> <body> <h1>SVG bug in Chrome?</h1> <div> <p> The elemts in the &lt;foreignObject&gt; are not positioned properly unless the <code>.widget-body</code> rule is changed to: <pre><code>.widget-body { background:yellow; /* position: relative; /* This is the problem! */ position: static; }</code></pre> </p> <h2>The Example:</h2> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="800"> <g> <g transform="scale(1) translate(100, 200)" style="cursor: move;"><foreignobject pointer-events="fill" width="300" height="350"> <body xmlns="http://www.w3.org/1999/xhtml" style="margin: 0px; height: 100%;"> <table style="border-collapse: collapse; font-size: 11px; color: rgb(119, 68, 0); font-family: Arial,Helvetica; font-weight: normal; border-style: none;"> <tbody> <tr> <td style="text-align: center; vertical-align: middle; white-space: nowrap;"> <div style="width:300px;height:350px;positio

Tags (comma-separated) Cancel