Javascript 用鼠标移动动态创建的SVG_Javascript_Svg_Mouseevent_Dom Events

Javascript 用鼠标移动动态创建的SVG

javascript svg

Javascript 用鼠标移动动态创建的SVG,javascript,svg,mouseevent,dom-events,Javascript,Svg,Mouseevent,Dom Events,我对HTML和JS非常陌生，但我正在尝试学习一些基础知识。现在我正在试验图形。我试图用JS动态创建两个svg元素，然后用鼠标分别移动它们。我可以创建它们，并在它们上单独注册鼠标事件，但无法让它们移动。为了尝试移动这些位置，在我的dragging（）函数中，我将svg style.top和style.left指定给指针的值。我可以在JS控制台中确认事件是从SGV发送的，并且元素标记中的顶部和左侧样式正在更改，但屏幕上的位置没有更改。我遵循了另一个示例，在该示例中，svg通过鼠标移动，并使用

我对HTML和JS非常陌生，但我正在尝试学习一些基础知识。现在我正在试验图形。
我试图用JS动态创建两个svg元素，然后用鼠标分别移动它们。
我可以创建它们，并在它们上单独注册鼠标事件，但无法让它们移动。为了尝试移动这些位置，在我的dragging（）函数中，我将svg style.top和style.left指定给指针的值。我可以在JS控制台中确认事件是从SGV发送的，并且元素标记中的顶部和左侧样式正在更改，但屏幕上的位置没有更改。
我遵循了另一个示例，在该示例中，svg通过鼠标移动，并使用鼠标值指定样式top和left，因此我不确定为什么这不起作用。
谢谢


SVG测试
测试SVG
//创建svg元素
var svg1=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
//设置宽度和高度
svg1.setAttribute（“宽度”、“100”）；
svg1.setAttribute（“高度”、“100”）；
setAttribute（“id”、“firstsvg”）；
svg1.onmousedown=startdrag；
//创建一个圆
var cir1=document.createElements（“http://www.w3.org/2000/svg“，”圆圈“）；
cir1.setAttribute（“cx”、“80”）；
cir1.setAttribute（“cy”，“80”）；
cir1.setAttribute（“r”、“30”）；
cir1.设置属性（“填充”、“红色”）；
//把它装在容器上
svg1.appendChild（cir1）；
//将容器附在文件上
//document.getElementById（“svg54583”）.appendChild（svg1）；
document.body.appendChild（svg1）；
var svg1=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
//设置宽度和高度
svg1.setAttribute（“宽度”、“100”）；
svg1.setAttribute（“高度”、“100”）；
setAttribute（“id”，“secondsvg”）；
svg1.onmousedown=startdrag；
//创建一个圆
var cir1=document.createElements（“http://www.w3.org/2000/svg“，”圆圈“）；
cir1.setAttribute（“cx”、“80”）；
cir1.setAttribute（“cy”，“80”）；
cir1.setAttribute（“r”、“30”）；
cir1.设置属性（“填充”、“红色”）；
//把它装在容器上
svg1.appendChild（cir1）；
//将容器附在文件上
//document.getElementById（“svg54583”）.appendChild（svg1）；
document.body.appendChild（svg1）；
功能启动图（e）
{ 
var-elmnt=e.target；
elmnt.onmousemove=拖动；
}
函数拖动（e）
{
var-elmnt=e.target；
elmnt.style.top=e.clientY；
elmnt.style.left=e.clientX；
控制台日志（elmnt）；
}

一些观察结果：您的代码是正确的，但是它非常冗长，所以我需要减少它。在代码中，您将找到一个从对象创建SVG元素的函数。我使用这个函数来创建svg元素和圆圈

我还将SVG元素放入一个数组中。在数组中包含类似元素时，使用它们更容易

其主要思想是：

svg元素具有

位置：绝对。svg的位置可以使用css中的top
和left
属性设置


在鼠标上向下拖动是正确的。如果drag为true，则可以拖动svg元素。svg的新位置（其top
和left
属性）在css中根据鼠标位置和鼠标与svg元素左上角之间的距离delta
进行设置
在鼠标上向上拖动是错误的。无法再拖动svg元素
请阅读代码和注释，如果您不理解，请告诉我

const SVG\u NS=”http://www.w3.org/2000/svg";
设svg1={
宽度：100，
身高：100
};
设圈1={
cx:80，
cy:80，
r:30，
填充：“红色”
};
让drag=null；//显示是否可以拖动的标志
设_数组=[]；//scg元素数组
设delta={}；//鼠标与SVG元素左上角坐标之间的距离
设m={}；//鼠标位置
函数createSVGElement（o、elmtName、父级）{
var elmt=document.createElements（SVG_NS，elmtName）；
for（o中的变量名称）{
如果（o.hasOwnProperty（名称））{
elmt.setAttributeNS（null，name，o[name]）；
}
}
父母、子女（elmt）；
返回elmt；
}
设firstsvg=createSVGElement（svg1，“svg”，svg54583）；
设firstCircle=createSVGElement（圆圈1，“圆圈”，firstsvg）；
设secondsvg=createSVGElement（svg1，“svg”，svg54583）；
设secondCircle=createSVGElement（圆圈1，“圆圈”，secondsvg）；
_array.push（firstsvg）；
_array.push（secondsvg）；
_array.forEach（（svg，i）=>{
addEventListener（“mousedown”，evt=>{
//你可以拖动
drag=i+1；//i+1，因为0为false。我需要它为true
设pos=svg.getBoundingClientRect（）；
//鼠标与SVG左上角坐标轴之间的距离
delta.x=evt.clientX-pos.x；
delta.y=evt.clientY-pos.y；
});
});
svg54583.addEventListener（“mousemove”，evt=>{
如果（拖动）{
m=oMousePos（svg54583，evt）；//console.log（“m”，m）；
_数组[drag-1].style.left=m.x-delta.x+“px”；
_数组[drag-1].style.top=m.y-delta.y+“px”；
}
});
svg54583.addEventListener（“鼠标”，evt=>{
拖动=空；
});
功能oMousePos（elmt、evt）{
var ClientRect=elmt.getBoundingClientRect（）；
返回{
//目标
x:Math.round（evt.clientX-ClientRect.left），
y:Math.round（evt.clientY-ClientRect.top）
};
}
*{margin:0；padding:0；}
svg{边框：1px实心；位置：绝对；背景：白色；}
svg:n类型（2）{left:200px；}
#svg54583{宽度：100vw；高度：100vh；背景：浅灰色；边框：1px实心；}
一些观察结果：
你的代码是正确的，但它是极端的
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>SVG Test</title>    
</head>
<body>

<h1>Testing <abbr>SVG</abbr></h1>
<div id="svg54583"></div>
<script>     

        // create the svg element
       var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");

        // set width and height
        svg1.setAttribute("width", "100");
        svg1.setAttribute("height", "100");
        svg1.setAttribute("id", "firstsvg");
        svg1.onmousedown = startdrag;

        // create a circle
        var cir1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        cir1.setAttribute("cx", "80");
        cir1.setAttribute("cy", "80");
        cir1.setAttribute("r", "30");
        cir1.setAttribute("fill", "red");

        // attach it to the container
        svg1.appendChild(cir1);

        // attach container to document
        //document.getElementById("svg54583").appendChild(svg1);
        document.body.appendChild(svg1);

        var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");

        // set width and height
        svg1.setAttribute("width", "100");
        svg1.setAttribute("height", "100");
        svg1.setAttribute("id", "secondsvg");
        svg1.onmousedown = startdrag;

        // create a circle
        var cir1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        cir1.setAttribute("cx", "80");
        cir1.setAttribute("cy", "80");
        cir1.setAttribute("r", "30");
        cir1.setAttribute("fill", "red");

        // attach it to the container
        svg1.appendChild(cir1);

        // attach container to document
        //document.getElementById("svg54583").appendChild(svg1);
        document.body.appendChild(svg1);

        function startdrag(e)
        { 

            var elmnt = e.target;
            elmnt.onmousemove = dragging;   

        }

        function dragging(e)
        {
            var elmnt = e.target;
            elmnt.style.top = e.clientY ;
            elmnt.style.left = e.clientX ;
            console.log(elmnt);
        }    

</script>