使用 SVG 中的外部对象创建文本区域的 Javascript 不起作用

标签 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" 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/

相关文章:

javascript - 如何将 javascript regexp 中的 Euro € 符号与八进制、十六进制或 unicode 元字符匹配?

javascript - 如何在点击头部时更改样式?

javascript - 覆盖或删除 React 组件的样式

svg - 使用 GOB 的 Rebol 3 文本渲染问题

javascript - 当我们单击特定选项卡时,如何隐藏 Accordion 菜单项中打开的所有选项卡?

javascript: var i 未定义? (明确规定)

Python 模块 BeautifulSoup 提取 anchor href

php - 如何在不干扰 HTML 标签的情况下从 php 字符串中剥离字符

javascript - 交互式世界地图,在鼠标悬停时突出显示国家

javascript - 悬停时平滑过渡