2

次のような簡単な例をいくつか試しました。

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <script type="text/javascript">
    <![CDATA[

      function test() {
        var svgElement = document.documentElement;
        var tnode = document.createTextNode('thx for the click');
        var t = document.createElement('text');
        t.setAttribute('x','20');
        t.setAttribute('y','32');
        t.setAttribute('class','ext');
        t.setAttribute('id','text1');
        t.appendChild(tnode);
        svgElement.appendChild(t);
      }
    ]]>
    </script>
  </defs>
  <rect width="100" height="100" y="50" x="50" onclick="test();" />
</svg>

これは長方形を示しており、クリックするとtest（）が実行されます（実行中のバージョンはこちらをご覧ください）。Firebugを使用したDOMで見られるように、新しい要素は実際に追加されます。

Firebugのスクリーンショット

しかし、エラーは-表示されません！なぜ追加されても表示されないのですか？私はこの問題に多くの時間を費やしてきましたが、わかりません。

この例をSVGワークショップからコピーし、ChromeとFirefoxで試しました。

助けてください ：/

4

1 に答える 1

5

SVG名前空間に要素を作成する必要があります。

var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
于 2012-08-09T18:29:13.600 に答える