2

svg に円を動的に追加する必要があります。ここでは、svg に正しく追加されていますが、正しい位置ではありません。ここでは、svg 内に円を作成し、svg をクリックして新しい円を追加して x と y の位置を取得します。画面からclientXとclientYの位置を正しく取得していますが、新しく追加された円は正しい位置に正しく追加されていません。選択した位置の svg に新しい円を追加する必要があります。

これがデモです。

var xpos, ypos;
$("svg").click(function (e) {
    xpos = e.clientX;
    ypos = e.clientY;
    alert(xpos+' '+ypos);
});

$("#create").click(function (e) {
    var svgNS = "http://www.w3.org/2000/svg";
    var myCircle = document.createElementNS(svgNS, "circle");
    myCircle.setAttributeNS(null, "id", "mycircle");
    myCircle.setAttributeNS(null, "fill", 'blue');
    myCircle.setAttributeNS(null, "cx", xpos);
    myCircle.setAttributeNS(null, "cy", ypos);
    myCircle.setAttributeNS(null, "r", '6');
    myCircle.setAttributeNS(null, "stroke", "none");
    var svg = document.querySelector("svg");
    svg.appendChild(myCircle);
});

任意の提案をいただければ幸いです。

4

2 に答える 2

1

問題は次の 2 つのことから来ています。

  1. e.clientXとe.clientYはページ内の位置です。したがって、svg の内部とはまったく関係ありません。それを貴重な情報にするために、jQuery offsetを使用しましょう。これにより、次の座標がピクセル単位で得られます。

    var offset = $(this).offset();
xpos = e.clientX - offset.left;
ypos = e.clientY - offset.top;

  2. もう 1 つの問題は、viewport と svg の配置が相互作用する方法にあります。実際には、あなたの設定では200px*200px、左上隅の座標が 0,-100 で、右下隅が 400,300 のボックスがあります。

    あなたの問題を解決するために、私が使用した解決策は次のとおりです。背景に白い四角形を追加します（この方法で、svg は与えられたすべてのスペースを効果的に使用します）。そして、わずかな平行移動を使用して、svg 座標に調整します。

    xpos = (e.clientX - offset.left)*2;
ypos = (e.clientY - offset.top)*2 - 100;

ここで更新されたフィドルを参照してください

于 2013-07-09T11:31:47.693 に答える