在这里，我使用path元素在鼠标移动时调整大小，但是当我设置“ d ”属性时
var attr="M"+(moveX+5)+","+(moveY+5)+" L"+(moveX+widthC1-5)+","+
(moveY+5)+" "+(moveX+widthC1-5)+","+(moveY+heightC1-5)+" "+(moveX+5)+","+(moveY+heightC1-5)+" Z";
getPath.setAttributeNS("d",attr);
然后“ d ”属性会自行更改为
m115 122l300 122 300 300 115 300 z
但是当我打印attr的值时，它会打印正确的值
M103,108 L300,108 300,300 103,300 Z
那么，为什么“ d ”属性的值会自动更改为更小的情况。
请不要使用jquery给出答案。
答案 0 :(得分：1)
我的结果是我想要的， HTML代码是
<html>
<head>
<script type="text/javascript" src="resizepath.js">
</script>
</head>
<body>
<div width="100%" height="100%">
<svg id="Svg" height="900" width="900" onload="main()">
<path id="rectPath" fill="#05bf05" d="M100,100L300,100 300,300 100,300 Z" style="cursor:move;"></path>
<line id="l1" x1="95" y1="95" x2="305" y2="95" stroke="#808080" stroke-width="1" stroke-dasharray="5,5" style="cursor:n-resize"/>
<line id="l2" x1="305" y1="95" x2="305" y2="305" stroke="#808080" stroke-width="1" stroke-dasharray="5,5" style="cursor:e-resize"/>
<line id="l3" x1="305" y1="305" x2="95" y2="305" stroke="#808080" stroke-width="1" stroke-dasharray="5,5" style="cursor:s-resize"/>
<line id="l4" x1="95" y1="305" x2="95" y2="95" stroke="#808080" stroke-width="1" stroke-dasharray="5,5" style="cursor:w-resize" />
<circle id="c1" cx="95" cy="95" r="5" stroke="black" stroke-width="0" fill="black" opacity="0.8" style="cursor:nw-resize" />
<circle id="c2" cx="305" cy="95" r="5" stroke="black" stroke-width="0" fill="black" opacity="0.8" style="cursor:ne-resize" />
<circle id="c3" cx="305" cy="305" r="5" stroke="black" stroke-width="0" fill="black" opacity="0.8" style="cursor:se-resize" />
<circle id="c4" cx="95" cy="305" r="5" stroke="black" stroke-width="0" fill="black" opacity="0.8" style="cursor:sw-resize" />
</svg>
</div>
</body>
java脚本代码是
function main（） {
var getSvg=document.getElementById("Svg");
var getPath=document.getElementById("rectPath");
var getC1=document.getElementById("c1");
var getC2=document.getElementById("c2");
var getC3=document.getElementById("c3");
var getC4=document.getElementById("c4");
var getL1=document.getElementById("l1");
var getL2=document.getElementById("l2");
var getL3=document.getElementById("l3");
var getL4=document.getElementById("l4");
var eventFireC1=false;
var eventFireC2=false;
var eventFireC3=false;
var eventFireC4=false;
var eventFireRect=false;
getC1.onmousedown=function(event)
{
var downX=event.clientX-7;
var downY=event.clientY-7;
getC1.setAttribute('cx',downX);
getC1.setAttribute('cy',downY);
eventFireC1=true;
}
getC1.onmousemove=function(event)
{
if(eventFireC1)
{
var moveX=event.clientX-7;
var moveY=event.clientY-7 ;
getC1.setAttribute('cx',moveX);
getC1.setAttribute('cy',moveY);
getC2.setAttribute('cy',moveY);
getC4.setAttribute('cx',moveX);
getL1.setAttribute('x1',moveX);
getL1.setAttribute('y1',moveY);
getL1.setAttribute('y2',moveY);
getL2.setAttribute('y1',moveY);
getL3.setAttribute('x2',moveX);
getL4.setAttribute('x1',moveX);
getL4.setAttribute('x2',moveX);
getL4.setAttribute('y2',moveY);
var attr="M"+(moveX+5)+","+(moveY+5)+" L"+(getL1.getAttribute('x2')-5)+","+(moveY+5)+" "+(getL2.getAttribute('x2')-5)+","+(getL2.getAttribute('y2')-5)+" "+(moveX+5)+","+(getL4.getAttribute('y1')-5)+" Z";
getPath.setAttribute("d",attr);
console.log(getPath);
}
}
document.body.onmouseup = function() {
eventFireC1 = false;
}
getC1.onmouseup=function(event)
{
var upX=event.clientX;
var upY=event.clientY;
eventFireC1=false;
}
getC2.onmousedown=function(event)
{
var downX=event.clientX-7;
var downY=event.clientY-7;
getC2.setAttribute('cx',downX);
getC2.setAttribute('cy',downY);
eventFireC2=true;
}
getC2.onmousemove=function(event)
{
if(eventFireC2)
{
var moveX=event.clientX-7;
var moveY=event.clientY-7;
getC2.setAttribute('cx',moveX);
getC2.setAttribute('cy',moveY);
getC1.setAttribute('cy',moveY);
getC3.setAttribute('cx',moveX);
getL1.setAttribute('x2',moveX);
getL1.setAttribute('y2',moveY);
getL1.setAttribute('y1',moveY);
getL2.setAttribute('y1',moveY);
getL2.setAttribute('x1',moveX);
getL2.setAttribute('x2',moveX);
getL3.setAttribute('x1',moveX);
getL4.setAttribute('y2',moveY);
var a=getL1.getAttribute('x1');
console.log(a);
var widthC2=moveX-getL3.getAttribute('x2');
var heightC2=getL3.getAttribute('y2')-moveY;
var attr="M"+(parseInt(getL1.getAttribute('x1'))+5)+","+(moveY+5)+" L"+(moveX-5)+","+(moveY+5)+" "+(moveX-5)+","+(getL2.getAttribute('y2')-5)+" "+(parseInt(getL3.getAttribute('x2'))+5)+","+(getL3.getAttribute('y2')-5)+" Z";
getPath.setAttribute("d",attr);
console.log(getL1.getAttribute('x1'));
console.log(attr);
console.log(getPath);
}
}
getC2.onmouseup=function(event)
{
var upX=event.clientX;
var upY=event.clientY;
eventFireC2=false;
}
getC3.onmousedown=function(event)
{
var downX=event.clientX-7;
var downY=event.clientY-7;
getC3.setAttribute('cx',downX);
getC3.setAttribute('cy',downY);
eventFireC3=true;
}
getC3.onmousemove=function(event)
{
if(eventFireC3)
{
var moveX=event.clientX-7;
var moveY=event.clientY-7;
getC3.setAttribute('cx',moveX);
getC3.setAttribute('cy',moveY);
getC2.setAttribute('cx',moveX);
getC4.setAttribute('cy',moveY);
getL1.setAttribute('x2',moveX);
getL2.setAttribute('x1',moveX);
getL2.setAttribute('x2',moveX);
getL2.setAttribute('y2',moveY);
getL3.setAttribute('x1',moveX);
getL3.setAttribute('y1',moveY);
getL3.setAttribute('y2',moveY);
getL4.setAttribute('y1',moveY);
var widthC3=moveX-getL1.getAttribute('x1');
var heightC3=moveY-getL1.getAttribute('y1');
var attr="M"+(parseInt(getL1.getAttribute('x1'))+5)+","+(parseInt(getL1.getAttribute('y1'))+5)+" L"+(moveX-5)+","+(parseInt(getL1.getAttribute('y2'))+5)+" "+(moveX-5)+","+(moveY-5)+" "+(parseInt(getL4.getAttribute('x1'))+5)+","+(moveY-5)+" Z";
getPath.setAttribute("d",attr);
}
}
getC3.onmouseup=function(event)
{
var upX=event.clientX;
var upY=event.clientY;
eventFireC3=false;
}
getC4.onmousedown=function(event)
{
var downX=event.clientX-7;
var downY=event.clientY-7;
getC4.setAttribute('cx',downX);
getC4.setAttribute('cy',downY);
eventFireC4=true;
}
getC4.onmousemove=function(event)
{
if(eventFireC4)
{
var moveX=event.clientX-7;
var moveY=event.clientY-7;
getC4.setAttribute('cx',moveX);
getC4.setAttribute('cy',moveY);
getC1.setAttribute('cx',moveX);
getC3.setAttribute('cy',moveY);
getL1.setAttribute('x1',moveX);
getL2.setAttribute('y2',moveY);
getL3.setAttribute('y1',moveY);
getL3.setAttribute('y2',moveY);
getL3.setAttribute('x2',moveX);
getL4.setAttribute('x1',moveX);
getL4.setAttribute('y1',moveY);
getL4.setAttribute('x2',moveX);
var widthC4=getL2.getAttribute('x2')-moveX;
var heightC4=moveY-getL2.getAttribute('y1');
var attr="M"+(moveX+5)+","+(parseInt(getL1.getAttribute('y1'))+5)+" L"+(getL1.getAttribute('x2')-5)+","+(parseInt(getL1.getAttribute('y2'))+5)+" "+(getL2.getAttribute('x2')-5)+","+(moveY-5)+" "+(moveX+5)+","+(moveY-5)+" Z";
getPath.setAttribute("d",attr);
console.log(attr);
console.log(getPath);
}
}
getC4.onmouseup=function(event)
{
var upX=event.clientX;
var upY=event.clientY;
eventFireC4=false;
}
getSvg.onmousemove=function()
{
if(eventFireC1)
{
var moveX=event.clientX-7;
var moveY=event.clientY-7 ;
getC1.setAttribute('cx',moveX);
getC1.setAttribute('cy',moveY);
getC2.setAttribute('cy',moveY);
getC4.setAttribute('cx',moveX);
getL1.setAttribute('x1',moveX);
getL1.setAttribute('y1',moveY);
getL1.setAttribute('y2',moveY);
getL2.setAttribute('y1',moveY);
getL3.setAttribute('x2',moveX);
getL4.setAttribute('x1',moveX);
getL4.setAttribute('x2',moveX);
getL4.setAttribute('y2',moveY);
var widthC1=getL2.getAttribute('x1')-moveX;
var heightC1=getL2.getAttribute('y2')-moveY;
var attr="M"+(moveX+5)+" "+(moveY+5)+"L"+(moveX+widthC1-5)+" "+(moveY+5)+" "+(moveX+widthC1-5)+" "+(moveY+heightC1-5)+" "+(moveX+5)+" "+(moveY+heightC1-5)+" Z";
getPath.setAttribute('d',attr);
}
else if(eventFireC2)
{
var moveX=event.clientX-7;
var moveY=event.clientY-7;
getC2.setAttribute('cx',moveX);
getC2.setAttribute('cy',moveY);
getC1.setAttribute('cy',moveY);
getC3.setAttribute('cx',moveX);
getL1.setAttribute('x2',moveX);
getL1.setAttribute('y2',moveY);
getL1.setAttribute('y1',moveY);
getL2.setAttribute('y1',moveY);
getL2.setAttribute('x1',moveX);
getL2.setAttribute('x2',moveX);
getL3.setAttribute('x1',moveX);
getL4.setAttribute('y2',moveY);
var widthC2=moveX-getL3.getAttribute('x2');
var heightC2=getL3.getAttribute('y2')-moveY;
var attr="M"+(parseInt(getL1.getAttribute('x1'))+5)+","+(moveY+5)+" L"+(moveX-5)+","+(moveY+5)+" "+(moveX-5)+","+(getL2.getAttribute('y2')-5)+" "+(parseInt(getL3.getAttribute('x2'))+5)+","+(getL3.getAttribute('y2')-5)+" Z";
getPath.setAttribute("d",attr);
}
else if(eventFireC3)
{
var moveX=event.clientX-7;
var moveY=event.clientY-7;
getC3.setAttribute('cx',moveX);
getC3.setAttribute('cy',moveY);
getC2.setAttribute('cx',moveX);
getC4.setAttribute('cy',moveY);
getL1.setAttribute('x2',moveX);
getL2.setAttribute('x1',moveX);
getL2.setAttribute('x2',moveX);
getL2.setAttribute('y2',moveY);
getL3.setAttribute('x1',moveX);
getL3.setAttribute('y1',moveY);
getL3.setAttribute('y2',moveY);
getL4.setAttribute('y1',moveY);
var widthC3=moveX-getL1.getAttribute('x1');
var heightC3=moveY-getL1.getAttribute('y1');
var attr="M"+(parseInt(getL1.getAttribute('x1'))+5)+","+(parseInt(getL1.getAttribute('y1'))+5)+" L"+(moveX-5)+","+(parseInt(getL1.getAttribute('y2'))+5)+" "+(moveX-5)+","+(moveY-5)+" "+(parseInt(getL4.getAttribute('x1'))+5)+","+(moveY-5)+" Z";
getPath.setAttribute("d",attr);
}
else if(eventFireC4)
{
var moveX=event.clientX-7;
var moveY=event.clientY-7;
getC4.setAttribute('cx',moveX);
getC4.setAttribute('cy',moveY);
getC1.setAttribute('cx',moveX);
getC3.setAttribute('cy',moveY);
getL1.setAttribute('x1',moveX);
getL2.setAttribute('y2',moveY);
getL3.setAttribute('y1',moveY);
getL3.setAttribute('y2',moveY);
getL3.setAttribute('x2',moveX);
getL4.setAttribute('x1',moveX);
getL4.setAttribute('y1',moveY);
getL4.setAttribute('x2',moveX);
var widthC4=getL2.getAttribute('x2')-moveX;
var heightC4=moveY-getL2.getAttribute('y1');
var attr="M"+(moveX+5)+","+(parseInt(getL1.getAttribute('y1'))+5)+" L"+(getL1.getAttribute('x2')-5)+","+(parseInt(getL1.getAttribute('y2'))+5)+" "+(getL2.getAttribute('x2')-5)+","+(moveY-5)+" "+(moveX+5)+","+(moveY-5)+" Z";
getPath.setAttribute("d",attr);
}
else
{
}
}
}