Question

我试图在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"/>

以及svg地图的其他元素

然后我做

<script>
var ns = "http://www.w3.org/2000/svg";

//import from DOM
var svg = document.getElementById("svg_canvas");
var mileEnd = document.getElementById("mile_end");

并添加事件监听器

mileEnd.addEventListener('mousedown', clickedMileEnd, false);
mileEnd.addEventListener('mouseup', unclickedMileEnd,false);
bancroft.addEventListener('mousedown', clickedBancroft, false);
bancroft.addEventListener('mouseup', unclickedBancroft,false);

这是我遇到问题的地方

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);

我做错了什么？

谢谢：）

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

0 个答案: