嘗試將svg文本附加到現有的svg元素

Question

我正在嘗試將使用html文檔的svg文本附加到我已有的svg上，但是它似乎不起作用，這是我使用的代碼

        var clickedEle=document.getElementById('clicked');
        clickedEle.style.fill='orange';
        clickedEle.style.backgroundImage = "url('images/mayans.jpg')";
        var btnText=document.createElementNS(svgns,'text');
        var btnLine= document.createElementNS(svgns,'line');

        btnText.setAttribute('x',hexObj.cx);
        btnText.setAttribute('y',hexObj.cy);  //hex is the object referencing the svg
        btnText.textContent ="Some text";

我沒有看到dom附加的任何內容。我嘗試使用foreingObject添加html元素，還嘗試使用css跟蹤背景圖像，但我嘗試添加的svg元素保持不變。

小提琴： https : //jsfiddle.net/Snedden27/6b0tx248/

它的行號346，您必須單擊橙色六邊形之一才能看到我要附加的六邊形。

Answer 1

正如Sasidhar所指出的那樣，您的代碼正在將text元素添加到不是text元素的有效父元素的多邊形元素中。 您需要將text元素添加到svg元素。 在添加了text元素的代碼中，變量clickedEle是多邊形元素，變量hex是svg元素。

更改...

clickedEle.appendChild(btnText);

至...

hex.appendChild(btnText);