使用javascript在MouseDown的svg元素上显示文本

我试图在svg地图上显示一些文本。 文本应显示为onmousedown

下面是我如何创建svg映射的

<svg id="svg_canvas" width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g id="map_group">
<title>Layer 1</title>

<rect stroke="#000000" id="bancroft_road" height="449.99998" width="34" y="-0.99998" x="164" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#7f7f7f"/>

这就是我的问题所在

function showText(target)
{
    var text = document.createElementNS(ns, "text");
    var x = (target.getAttribute('x')).toString;
    text.setAttribute('x',x)
    var y = (target.getAttribute('y')).toString;
    text.setAttribute('y',y);
    var textNode;
    console.log("created textnode");
    if (target.id=="svg_14"||"svg_16")
    {
         textNode = document.createTextNode("People Palace"); 
    }else if (target.id=="svg_11"||"svg_12"||"svg_13")
    {
         textNode = document.createTextNode("Engineering Building"); 
    }
    switch (target.id){
            case "bancroft_road":
                textNode = document.createTextNode("Bancroft Road"); 
                break;
            case "mile_end":
                 textNode = document.createTextNode("Mile End Road");
                 console.log(textNode);
                break;
            case "godward_square" :
                 textNode = document.createTextNode("Godward Square");
                break;
            case "computer_science":
                 textNode = document.createTextNode("CompSci Building");
                break;
            case "itl":
                 textNode = document.createTextNode("ITL Building");
                break;
            default: console.log("not fond");
    }
    text.appendChild(textNode);
    svg.appendChild(text);
}

调试并输出到控制台我看到switch语句工作正常，问题出现在函数的最后两行：

text.appendChild(textNode);
svg.appendChild(text);

我做错了什么

---

谢谢：

您实际上并没有说明出了什么问题。一个演示片段或小提琴将是有用的。顺便说一句。表达式target.id==svg|u 14 | svg_16将始终为真。我想你的意思是target.id==svg|14 | | target.id==svg|16i没有错误，也没有任何错误，但是代码不允许我在鼠标被剪切时显示一些文本，谢谢你指出其他错误。如果你创建了一个演示小提琴或片段，我们可以看看。目前有一大堆代码缺失，因此我们无法确定错误在哪里。

function showText(target)
{
    var text = document.createElementNS(ns, "text");
    var x = (target.getAttribute('x')).toString;
    text.setAttribute('x',x)
    var y = (target.getAttribute('y')).toString;
    text.setAttribute('y',y);
    var textNode;
    console.log("created textnode");
    if (target.id=="svg_14"||"svg_16")
    {
         textNode = document.createTextNode("People Palace"); 
    }else if (target.id=="svg_11"||"svg_12"||"svg_13")
    {
         textNode = document.createTextNode("Engineering Building"); 
    }
    switch (target.id){
            case "bancroft_road":
                textNode = document.createTextNode("Bancroft Road"); 
                break;
            case "mile_end":
                 textNode = document.createTextNode("Mile End Road");
                 console.log(textNode);
                break;
            case "godward_square" :
                 textNode = document.createTextNode("Godward Square");
                break;
            case "computer_science":
                 textNode = document.createTextNode("CompSci Building");
                break;
            case "itl":
                 textNode = document.createTextNode("ITL Building");
                break;
            default: console.log("not fond");
    }
    text.appendChild(textNode);
    svg.appendChild(text);
}

text.appendChild(textNode);
svg.appendChild(text);