我正在尝试将文本元素添加到动态创建的SVG图表中，以便可以生成标签，但不能使其正常工作。
有一个WHILE循环，用于为图表添加框。我对文本标签使用了相同的while循环，但它无法正常工作，这也会导致框也失效。当我删除文本标签时，它可以正常工作。
非常感谢您的帮助。
<svg id="mysvg" width="1000" height="800"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="50" y="60" fill="black"
font-family="Arial, Helvetica, sans-serif"
font-size="28">Revenue and Expenses</text>
<line x1="150" y1="80" x2="150" y2="320"
style="stroke:rgb(155, 144, 144);stroke-width:5" />
<script type="application/ecmascript">
<![CDATA[
var mysvg = document.getElementById("mysvg");
var chartStart = [152, 84, 152]
var chartWidth = [100,64,36]
var chartNames = ["Revenue", "Expenses","Profit"]
var chartColor = ["#28CE6D","#DF3456","#4DC7EC"]
var num = chartNames.length;
while (num-- > 0)
{
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", chartStart[num]);
rect.setAttribute("y", [num] * 70 + 100);
rect.setAttribute("width", chartWidth[num]);
rect.setAttribute("height", "50");
rect.setAttribute("style", "fill:" + chartColor[num] + ";stroke:black;stroke-width:0;opacity:1");
var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
text.setAttribute("x", "280");
text.setAttribute("y", [num] *70 + 130);
text.setAttribute("style", "fill:black");
text.setAttribute("font-family", "Arial, Helvetica, sans-serif");
text.setAttribute("font-size","18");
text.setAttribute("textContent", chartNames[num]);
mysvg.appendChild(rect);
mysvg.appendChild(text);
}
]]>
</script>
</svg>
确定，找到了自己的解决方案，我还没有创建文本节点来追加到text元素的值。使用以下内容修复了它。我要分享，以便这个问题不会得到解答。谢谢
<!DOCTYPE html>
<body>
<svg id="mysvg" width="1000" height="800"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="50" y="60" fill="black"
font-family="Arial, Helvetica, sans-serif"
font-size="28">Revenue and Expenses</text>
<line x1="150" y1="80" x2="150" y2="320"
style="stroke:rgb(155, 144, 144);stroke-width:5" />
<script type="application/ecmascript">
<![CDATA[
var mysvg = document.getElementById("mysvg");
var chartStart = [152, 84, 152]
var chartWidth = [100,64,36]
var chartNames = ["Revenue", "Expenses","Profit"]
var chartColor = ["#28CE6D","#DF3456","#4DC7EC"]
var num = chartNames.length;
while (num-- > 0)
{
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", chartStart[num]);
rect.setAttribute("y", [num] * 70 + 100);
rect.setAttribute("width", chartWidth[num]);
rect.setAttribute("height", "50");
rect.setAttribute("style", "fill:" + chartColor[num] + ";stroke:black;stroke-width:0;opacity:1");
var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
label.setAttribute("x", "280");
label.setAttribute("y", [num] *70 + 130);
label.setAttribute("style", "fill:black");
label.setAttribute("font-family", "Arial, Helvetica, sans-serif");
label.setAttribute("font-size","18");
var txt = document.createTextNode(chartNames[num]);
label.appendChild(txt);
mysvg.appendChild(rect);
mysvg.appendChild(label);
}
]]>
</script>
</svg>
</body>
</html>