我尝试使用JavaScript创建一个带有文本的SVG矩形。我已经有了矩形（由morris.js生成，图表库），但似乎无法获取文本。
我想要实现的输出看起来有点像这样：
<svg>
<g>
<rect x="0" y="0" width="100" height="100" fill="red"></rect>
<text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
</g>
</svg>
现在这是我的代码（因为在这里未定义了rectangleElement，所以代码片段不会运行）：
console.log(rectangleElement);
/* output:
<rect x="1205.5019308035712" y="0" width="193.5206919642857" height="307" r="0" rx="0" ry="0" fill="#E5E5E5" stroke="none" fill-opacity="0.8" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); fill-opacity: 0;"></rect>
*/
var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
g.appendChild(t);
g.appendChild(rectangleElement);
console.log(g);
/* output:
<g><text></text></g>
*/
如您所见，rectangleElement未添加到我的论坛（g）。在尝试将矩形附加到组时，我也没有在控制台中出现任何错误。
关于我可能做错的任何想法？
答案 0 :(得分：0)
我最终自己解决了这个问题。我完全不确定问题是什么，当我在下面添加看似无关的代码时，它开始工作。
var txtElem = document.createElementNS("http://www.w3.org/2000/svg", "text");
txtElem.setAttributeNS(null,"x",20);
txtElem.setAttributeNS(null,"y",40);
var theText = "text";
var theMSG = document.createTextNode(theText);
txtElem.appendChild(theMSG);