Javascript 通过javascript动态设置文本SVG元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14758125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting text SVG element dynamically via javascript
提问by and-k
I am creating SVG elements via JavaScript, and it works fine, but when I create an text SVG element and define it's content, the browser just don't render the value, despite the value is in the code when I inspect it with firebug.
我正在通过 JavaScript 创建 SVG 元素，它工作正常，但是当我创建一个文本 SVG 元素并定义它的内容时，浏览器只是不呈现该值，尽管当我使用 firebug 检查它时该值在代码中。
The code is:
代码是：
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xlink','http://www.w3.org/1999/xlink');
svg.setAttribute('width','187');
svg.setAttribute('height','234');
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('width','187');
rect.setAttribute('height','234');
rect.setAttribute('fill','#fff');
rect.setAttribute('stroke','#000');
rect.setAttribute('stroke-width','2');
rect.setAttribute('rx','7');
var text = document.createElementNS('ttp://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '10');
text.setAttribute('y', '20');
text.setAttribute('fill', '#000');
text.textContent = '2';
svg.appendChild(rect);
svg.appendChild(text);
var wp = document.getElementById('wrapper');
wp.appendChild(svg);
Here is the jsfiddle link. If you inspect the SVG you will see the value of the text element there, but the browser doesn't render it.
这是jsfiddle 链接。如果您检查 SVG，您将在那里看到文本元素的值，但浏览器不会呈现它。
Thanks
谢谢
采纳答案by cmonkey
You're short an "h" in your namespace
你在你的命名空间中短了一个“h”
Was
曾是
var text = document.createElementNS('ttp://www.w3.org/2000/svg', 'text');
should be
应该
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
回答by Milind Morey
function createText() {
var newText = document.createElementNS(svgNS,"text");
newText.setAttributeNS(null,"x",20);
newText.setAttributeNS(null,"y",100);
var textNode = document.createTextNode("milind morey");
newText.appendChild(textNode);
document.getElementById("firstGroup").appendChild(newText);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<g id="firstGroup">
<text x="20" y="45" onclick="createText();" font-size=+13px">Click on this text to create a new text.</text>
</g>
</svg>
回答by Kamil Kie?czewski
I compress your code a little now it works
我压缩了你的代码，现在它可以工作了
let txt='2';
wrapper.innerHTML=`
<svg xlink="http://www.w3.org/1999/xlink" width="187" height="234">
<rect width="187" height="234" fill="#fff" stroke="#000"
stroke-width="2" rx="7"></rect>
<text x="10" y="20" fill="#000">${txt}</text>
</svg>
`;<div id=wrapper></div>回答by wolf
You did a very simple mistake:
你犯了一个非常简单的错误：
var text = document.createElementNS('ttp://www.w3.org/2000/svg', 'text'); ^^^ compared to
var text = document.createElementNS('ttp://www.w3.org/2000/svg', 'text'); ^^^ 相比
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); ^^^^ Hit the keyboard!
var text = document.createElementNS(' http://www.w3.org/2000/svg', 'text'); ^^^^ 敲键盘！
