使用javascript將文本節點添加到SVG組，但沒有出現

這是位於標記內的SVG文件中的Javascript。使用javascript將文本節點添加到SVG組，但沒有出現

此SVG在我的城市中顯示樂隊的時間線。當鼠標在a上點擊時，腳本訪問一個XML庫，並在加入時檢索每個band中成員的名稱。並將新的文本節點添加到包含該文件的SVG組。

這是第一個：

<g class="band" id="hajimama"> 
<text x="633.333333333" y="50" fill="black" font-size="12">Hajimama</text> 
    <rect x="633.333333333" y="50" width="413.333333333" height="15" fill="red" onmousedown="growBox(evt);"></rect></g>

這是growBox（）函數：

function growBox(evt) 
{ 
var i, g_index; 
var r = evt.target; 

g_index = find_SVGBand(r); 

b = find_XMLBand(b_name); 
members = b.getElementsByTagName("member"); //members.length is used for drawing. 
stretch = members.length*16; 

for (k=g_index+1;k<groups.length;k++) 
{ 
    cur_y = parseFloat(get_firstChild(groups[k]).getAttribute("y")); 
    new_y = cur_y + stretch; 
    get_firstChild(groups[k]).setAttribute("y",new_y); 
    groups[k].getElementsByTagName("rect")[0].setAttribute("y",new_y); 
} 
evt.target.setAttribute('height',stretch); 

var s = parseFloat(r.getAttribute("y")) + 5; //write the first member name below the band name 
for (k=0;k<members.length;k++) //loop through each member of a band 
{ 
    var m=members[k]; 
    var m_name = returnMemberName(m); 

    q = document.createElement("text"); 
    q.setAttribute("font-size",20); 

    if (m.getElementsByTagName("instrument")[0].hasChildNodes()) 
    { 
     if (m.getElementsByTagName("instrument")[0].childNodes[0].nodeValue == "guitar") 
      inst_clr="#993333"; 
     else if (m.getElementsByTagName("instrument")[0].childNodes[0].nodeValue == "bass") 
      inst_clr="#339933"; 
     else if (m.getElementsByTagName("instrument")[0].childNodes[0].nodeValue == "drums") 
      inst_clr="#333399"; 
    } 
    else 
     inst_clr="#000000"; 

    q.setAttribute("fill",inst_clr); 

    //draw names based on start dates 
    m_start = returnMemberJoinDate(m); 
    mrect_start = (m_start - 2000) * 80; 

    q.setAttribute("x",mrect_start); 
    q.setAttribute("y",s); 
    mn = document.createTextNode(m_name); 
    q.appendChild(mn); 
    r.parentNode.appendChild(q); 
    q.setAttribute('visibility','visible'); 
    s+=15; 
    alert(r.parentNode.getAttribute("id") + " " + get_lastChild(r.parentNode).nodeName + " " + get_lastChild(r.parentNode).childNodes[0].nodeValue); 
} //for 

evt.target.setAttribute('onmousedown',''); 
addEBox(evt); 
}

，你可以通過警報看到（）中的數據正確訪問和節點是正確地附加到節點，因爲r.parentNode.getAttribute（「id」）返回節點的id。

任何想法爲什麼文本不會出現？

謝謝。

來源

2013-04-10 collwyn

在SVG元素必須在SVG命名空間中創建。這意味着createElement不會創建SVG文本元素，您需要改爲createElementNS。

所以

q = document.createElement("text");

應該

q = document.createElementNS("http://www.w3.org/2000/svg", "text");

來源

2013-04-10 12:55:11

非常感謝。我之前嘗試過NS，但由於其他錯誤而無法工作:)但這個簡單的改變效果很好。我必須承認我根本不瞭解NameSpace :) – collwyn 2013-04-11 04:50:57

上述

羅伯茨代碼爲我工作在IE11，感謝羅伯特！

起初，我得到了對象不支持屬性或方法'createElementNS'，但發現這是由於在該頁面上啓用了兼容模式，一旦我刪除它的東西工作正常。

來源

2014-06-14 08:25:06

使用javascript將文本節點添加到SVG組，但沒有出現

回答

相關問題