Menu
I have the following HTML/javascript:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg id = "svg" xmlns="http://www.w3.org/2000/svg" width = "800" height = "400" >
<foreignobject id = "x" x = "50" y = "50" width = "300" height = "100">
<textarea rows = "3" cols = "30" border = "1px"> hello </textarea>
</foreignobject>
</svg>
<script>
var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignobject");
fo.setAttribute("id", "y");
fo.setAttribute("x", "200");
fo.setAttribute("y", "300");
fo.setAttribute("width", "300");
fo.setAttribute("height", "100");
var ta = document.createElement("textarea");
ta.rows = 3;
ta.cols = 30;
ta.innerHTML = "world";
fo.appendChild(ta);
document.getElementById("svg").appendChild(fo);
</script>
</body>
</html>
There is a text area inside a foreign object inside the SVG and it shows up as expected. However, I also have javascript that tries to create exactly the same thing, but the text area won't show up. Tried this on chrome browser. What did I do wrong?
688
asked Mar 11 '26 16:03
SVG element names are case sensitive. Try foreignObject instead of foreignobject.
171
This is just that you missed the XHTML namespace and foreignObject instead od foreignobject: http://jsfiddle.net/49sg5j5m/4/
var ta = document.createElementNS("http://www.w3.org/1999/xhtml", "textarea");
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
