我有以下文档，我计划在其中添加一些水平线，文本框的每一行各一条，其中行应具有“名称:数字”结构。
<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
<meta charset="UTF-8" />
<meta http-equiv="pragma" content="no-cache"/>
<title>Diagrama Audax</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style type="text/css">
#sidebar {float: left; display: inline-block;}
#drawing {left: 330px; position: relative; display: inline-block}
#Locais {width: 300px; height: 500px;}
svg {background: #ddd; width: 500px; height: 500px;}
td, textarea {margin: 0; padding: 0;}
</style>
</head>
<body>
<table>
<tr id="tabela" cols="2">
<td>
<textarea id="Locais"></textarea>
</td>
<td>
<svg id="svg">
<circle stroke="black" fill="red" cx="200" cy="200" r="100" opacity="0.1"/>
<line id="path" x1="0" y1="0" x2="200" y2="200" stroke="black"/>
</svg>
</td>
</tr>
</table>
</body>
<script>
// A função abaixo pega a caixa de texto e associa o evento "draw" a ela
$(function () {
$("#Locais").keyup(function() {
valueString = $("#Locais").val();
if (valueString != "") {
lines = valueString.replace("\r","").split("\n");
CPs = [];
for (i in lines) {
eachLine = lines[i];
tmpDict = {};
values = eachLine.split(":");
for (j in values) {
eachVal = values[j];
tmpDict[j] = eachVal;
}
CPs.push(tmpDict);
}
DrawUsing(CPs);
}
})
});
function DrawUsing (lista) {
var svg = document.getElementById("svg");
for (element in lista) {
refname = lista[element][0];
refdist = lista[element][1];
var line = document.createElement ("line");
line.setAttribute('stroke', "black");
line.setAttribute('stroke-width', 1);
line.setAttribute('x1', 0);
line.setAttribute('x2', 100);
line.setAttribute('y1', refdist);
line.setAttribute('y2', refdist);
svg.appendChild(line);
console.log(document.getElementsByTagName("line").length);
}
}
</script>
</html>
作为“热身”，我尝试操纵 SVG，在每次按下按键时向其中添加线条。粘贴了以下文本(只需使用 control+V 粘贴就足以触发 keyup 事件)，但是虽然 svg 子列表增加，但没有看到额外的行。
我做错了什么？ (我想很多，因为我对 javascript 非常陌生，并且直接操作内联 <svg> 元素(而不是 <object> )的记录非常少，看起来......
非常欢迎任何帮助，感谢您的阅读!
最佳答案
SVG 元素位于 http://www.w3.org/2000/svg 命名空间中，而不是
var line = document.createElement ("line");
使用
var line = document.createElementNS ("http://www.w3.org/2000/svg","line");
关于javascript - 使用 javascript 将子项附加到内联 SVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12574163/