使用javascript将文本节点添加到SVG组,但未显示
这是标签内SVG文件中的Javascript 这个SVG显示了我所在城市的乐队时间表。 当鼠标单击时,脚本将访问一个XML库,并检索每个频带中成员加入时的名称。并将新的文本节点添加到包含的SVG组中 这是第一个:使用javascript将文本节点添加到SVG组,但未显示,javascript,text,svg,add,Javascript,Text,Svg,Add,这是标签内SVG文件中的Javascript 这个SVG显示了我所在城市的乐队时间表。 当鼠标单击时,脚本将访问一个XML库,并检索每个频带中成员加入时的名称。并将新的文本节点添加到包含的SVG组中 这是第一个: <g class="band" id="hajimama"> <text x="633.333333333" y="50" fill="black" font-size="12">Hajimama</text> <rect x="
<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.getAttributeid返回节点的id
你知道为什么文本没有出现吗
谢谢。在SVG中,必须在SVG名称空间中创建元素。这意味着createElement不会创建SVG文本元素,而是需要CreateElements 所以 应该是
q = document.createElementNS("http://www.w3.org/2000/svg", "text");
在SVG中,必须在SVG名称空间中创建元素。这意味着createElement不会创建SVG文本元素,而是需要CreateElements 所以 应该是
q = document.createElementNS("http://www.w3.org/2000/svg", "text");
上面的Roberts代码在IE11上对我有用,谢谢Robert
起初,我得到的对象不支持属性或方法“CreateElements”,但发现这是由于在该页面上启用了兼容模式,一旦我将其删除,一切正常。Roberts上面的代码在IE11上对我有效,谢谢Robert
起初,我得到的对象不支持属性或方法“CreateElements”,但发现这是由于在该页面上启用了兼容模式,一旦我将其删除,一切正常。wow非常感谢。我以前尝试过NS,但由于其他错误,它不起作用:但这个简单的更改非常有效。我必须承认我一点也不了解名称空间:哇,非常感谢。我以前尝试过NS,但由于其他错误,它不起作用:但这个简单的更改非常有效。我必须承认我根本不了解名称空间: