HTML5 SVGに動的に要素を追加するにはどうすればよいですか？

私はこれに似たいくつかの質問を読んだことがありますが、私のコードが正しく動作することができません。ユーザーがSVGエリアをクリックしたときにSVG要素を追加したい。ここでHTML5 SVGに動的に要素を追加するにはどうすればよいですか？

は、それが正しくレンダリング、SVGと私のHTML5です：ここでは

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="jquery-1.6.2.min.js"></script> 
    <script src="svgdraw.js"></script> 
    </head> 
    <body> 
    <svg id="canvas" width="500" height="500"> 
    <circle cx="80" cy="80" r="50" fill="blue"/> 
    </svg> 
    </body> 
</html>

は、クリックイベントで実行されるJavaScriptです：

Google Chromeで

var svgDocument = document.getElementById('canvas'); 
    var svgns = "http://www.w3.org/2000/svg"; 
    var shape = svgDocument.createElementNS(svgns,"circle"); 
    shape.setAttributeNS(null, "cx", 25); 
    shape.setAttributeNS(null, "cy", 25); 
    shape.setAttributeNS(null, "r", 20); 
    shape.setAttributeNS(null, "fill", "green"); 
    document.getElementById('canvas').appendChild(shape);

私はそのエラーメッセージが表示されますcreateElementNSは存在しません。しかし、すべてNSとnullのいずれかを削除しても機能しません。これを行う正しい方法は何ですか？ブラウザごとに違いはありますか？

出典

2011-07-14 Jonas

を私はあなたの問題を再現しようとしたとき、私は* svgDocument *が未定義であったことを検出しました。それがなぜ起こっているのか？ –

私はhtml5はもはや名前空間を必要としませんでしたか？ – yota

私の知る限りcreateElementNS()が-variable documentの一部である知っているように、試してみてください。

var shape = document.createElementNS(svgns,"circle");

出典

2011-07-14 18:58:47 KilZone

svgnsとは何ですか？ – user2846569

createElementNS関数には、名前空間とオブジェクト名の2つの値が必要です。最初のものはURLのようにフォーマットされ、後者は何でもかまいません。 @ Jonasはsvgns（SVG Namespace）に格納されているURL型の値を持っていますので、その変数を再利用するだけです。 – KilZone

HTML5 SVGに動的に要素を追加するにはどうすればよいですか？

答えて

関連する問題