我有以下 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>
SVG 中的异物内有一个文本区域,它按预期显示。但是,我也有 javascript 试图创建完全相同的东西,但文本区域不会显示。在 chrome 浏览器上试过这个。我做错了什么?
最佳答案
SVG 元素名称区分大小写。尝试使用 foreignObject
而不是 foreignobject
。
关于使用 SVG 中的外部对象创建文本区域的 Javascript 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29295322/