Размещение SVG-элемента в событии onClick

В настоящее время я пытаюсь иметь событие onClick, в котором щелчок внутри поля помещает SVG-круг в координаты указателя мыши.Размещение SVG-элемента в событии onClick

В то время как это очень basic, мне удалось получить событие onClick, хотя я не могу заставить круг вызвать вызовы мыши. Вместо этого он поднимается в верхнем левом углу окна, как если бы ему давались разные координаты.

Любая помощь (с максимально возможным объяснением) была бы оценена. Я все еще новичок.

Код я работаю с заключается в следующем:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>TEST CODE</title> 

<script> 

var svgNS = "http://www.w3.org/2000/svg"; 

    function showCoords() { 
    var cX = event.clientX; 
    var sX = event.screenX; 
    var cY = event.clientY; 
    var sY = event.screenY; 
    var svgX = cX; 
    var svgY = cY; 
    } 

function createCircle() { 
    var myCircle = document.createElementNS(svgNS,"circle"); 
    myCircle.setAttributeNS(null,"id","mycircle"); 
    myCircle.setAttributeNS(null,"cx","svgX"); 
    myCircle.setAttributeNS(null,"cy","svgY"); 
    myCircle.setAttributeNS(null,"r",20); 
    myCircle.setAttributeNS(null,"fill","black"); 
    myCircle.setAttributeNS(null,"stroke","none"); 
    document.getElementById("mySVG").appendChild(myCircle); 
    }     

</script> 
</head> 

<body> 
<div onClick="createCircle()"> 
<svg id="mySVG" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="400" height="200" style="border:1px solid #000000;"> 
</svg> 
<br> 
<p id="demo"></p> 
</div> 

</body> 
</html>

источник

2015-04-28 Brandon Lee

Линии, которые устанавливают свой центр окружности неверны. Их следует читать:

myCircle.setAttributeNS(null,"cx", svgX); 
myCircle.setAttributeNS(null,"cy", svgY);

Т.е. удалите кавычки по переменным.

источник

2015-04-28 05:57:52

Размещение SVG-элемента в событии onClick

ответ

Смежные вопросы