Неправильное добавление круга в правильное положение в svg с viewbox?

Question

Мне нужно добавить круг в svg динамически. Здесь его добавление в svg правильно, но не в правильном положении. Здесь я создаю на круге внутри svg и получаю позицию x и y, нажимая на svg, чтобы добавить новый круг. Его правильное положение clientX и customerY корректно отображается на экране, но новый добавляющий круг неправильно добавляет правильную позицию. Мне нужно добавить новый круг на svg в выбранной позиции.

Вот это DEMO.

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

любые предложения должны быть оценены.

Answer 1

Что-то вроде этого должно это сделать.

$("#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, "r", '6'); 
    myCircle.setAttributeNS(null, "stroke", "none"); 
    var svg = document.querySelector("svg"); 
    svg.appendChild(myCircle); 
    var pt = svg.createSVGPoint(); 
    pt.x = xpos; 
    pt.y = ypos; 
    var globalPoint = pt.matrixTransform(myCircle.getScreenCTM().inverse()); 
    var globalToLocal = myCircle.getTransformToElement(svg).inverse(); 
    var inObjectSpace = globalPoint.matrixTransform(globalToLocal); 
    myCircle.setAttributeNS(null, "cx", inObjectSpace.x); 
    myCircle.setAttributeNS(null, "cy", inObjectSpace.y); 
}); 

Этот question имеет более подробную информацию. хотя его решение не совсем правильно.

Answer 2

Проблема исходит от двух вещей:

1. e.clientX и e.clientY это позиция на странице. Следовательно, это не полностью соответствует внутренней части svg. Чтобы сделать эту ценную информацию, давайте использовать jQuery offset. Это дает следующие координаты в пикселях:

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

2. Другая проблема происходит от способа просмотра и позиционирования SVG interract. Дело в том, что с вашими настройками у нас есть поле 200px*200px, в котором верхний левый угол, как координата 0, -100, а нижний правый - 400 300.

   Чтобы решить вашу проблему, решение, которое я использовал, следующее: добавление белого фона в фоновом режиме (таким образом, svg эффективно использует все пространство, которое мы ему даем). И использовать небольшой перевод, чтобы приспособиться к SVG координат, которая

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

См Обновленной скрипке here