6

これに似た質問をいくつか読みましたが、コードを正しく機能させることができません。ユーザーがSVG領域をクリックしたときに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は次のとおりです。

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

Google Chromeで、createElementNS存在しないエラーメッセージが表示されます。NSしかし、すべてを削除すると、それを機能させることができませんnull。これを行う正しい方法は何ですか？ブラウザによって違いますか？

4

1 に答える 1

8

私が知る限り、-変数createElementNS()の一部ですdocument。試してください：

var shape = document.createElementNS(svgns,"circle");
于 2011-07-14T18:58:47.933 に答える