Menu
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.
754
You need to have an HTML body be the sub-element of foreignobject. Once you have that you can put anything inside the body.
95
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
