SVG foreignObject not showing in Chrome

问题

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.

回答1:

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

回答2:

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>

来源：https://stackoverflow.com/questions/11194403/svg-foreignobject-not-showing-in-chrome

标签

javascript

html

firefox

google-chrome

jquery-svg