Javascript创建一个文本区域，SVG中的外来对象不起作用_Javascript_Html_Svg

Javascript创建一个文本区域，SVG中的外来对象不起作用

javascript html svg

Javascript创建一个文本区域，SVG中的外来对象不起作用,javascript,html,svg,Javascript,Html,Svg,我有以下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" heig

我有以下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>


你好
var fo=document.createElements（“http://www.w3.org/2000/svg“，”外国物体“）；
fo.setAttribute（“id”、“y”）；
fo.setAttribute（“x”、“200”）；
fo.setAttribute（“y”、“300”）；
fo.setAttribute（“宽度”、“300”）；
fo.setAttribute（“高度”、“100”）；
var ta=document.createElement（“textarea”）；
ta.rows=3；
ta.cols=30；
ta.innerHTML=“世界”；
fo.appendChild（ta）；
document.getElementById（“svg”）.appendChild（fo）；

SVG中的外来对象中有一个文本区域，它按预期显示。然而，我也有javascript尝试创建完全相同的东西，但是文本区域不会显示。在chrome浏览器上尝试了这个。我做错了什么？

SVG元素名称区分大小写。尝试

foreignObject

而不是

foreignObject

这只是因为您错过了XHTML名称空间，而

foreignObject

而不是od

foreignObject

：

使用此代码

<!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>


你好
var fo=document.createElements（“http://www.w3.org/2000/svg“，”外国物体“）；
fo.setAttribute（“id”、“y”）；
fo.setAttribute（“x”、“200”）；
fo.setAttribute（“y”、“300”）；
fo.setAttribute（“宽度”、“300”）；
fo.setAttribute（“高度”、“100”）；
var ta=document.createElement（“textarea”）；
ta.rows=3；
ta.cols=30；
ta.innerHTML=“世界”；
fo.appendChild（ta）；
document.getElementById（“svg”）.appendChild（fo）；

<!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>