1

これは、タグ内の 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="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);
}

alert() でわかるように、r.parentNode.getAttribute("id") がノードの ID を返すため、データが適切にアクセスされ、ノードがノードに適切に追加されます。

テキストが表示されない理由はありますか？

ありがとう。

4

2 に答える 2

4

In SVG 要素は、SVG 名前空間で作成する必要があります。これは、createElement が SVG テキスト要素を作成しないことを意味します。代わりに createElementNS が必要です。

そう

q = document.createElement("text");

する必要があります

q = document.createElementNS("http://www.w3.org/2000/svg", "text");
于 2013-04-10T12:55:11.327 に答える
0

上記の Roberts コードは、IE11 で動作します。Robert さんに感謝します。

最初に、オブジェクトはプロパティまたはメソッド「createElementNS」をサポートしていませんが、これはそのページで互換モードが有効になっていることが原因であることがわかりました。削除すると、問題なく動作しました。

于 2014-06-14T08:25:06.633 に答える