<svg width="100%" height="100%" onload="startUp(evt)"> <style> ellipse#herb,ellipse#rosemary,ellipse#face {fill:none;stroke:blue;stroke-width:15;} </style> <script> //global variables var svgDocument=null; var svg=null; var things=new Array("rose","orchid","herb","rosemary","face"); var lastX=new Array(); var lastY=new Array(); //functions function startUp(evt){ svg=evt.target; svgDocument=svg.ownerDocument; console.log(svgDocument); for (i in things){ lastX[things[i]]=0; lastY[things[i]]=0; svgDocument.getElementById(things[i]).setAttribute('onmousedown',"lock(evt)"); } } function lock(evt){ var id=evt.currentTarget.id; console.log(id); x=evt.clientX; y=evt.clientY offsetX=x-lastX[id]; offsetY=y-lastY[id]; svg.setAttribute('onmousemove',`moving(evt,"${id}",${offsetX},${offsetY})`); svg.setAttribute('onmouseup','svg.setAttribute("onmousemove","null")'); } function moving(e,id,x,y){ o=svgDocument.getElementById(id);console.log(id); o.setAttribute('transform',"translate("+(e.clientX-x)+","+(e.clientY-y)+")"); lastX[id]=e.clientX-x; lastY[id]=e.clientY-y; } </script> <rect id="rose" x="100" y="100" width="100" height="100" fill="red" stroke="blue"/> <rect id="orchid" x="200" y="100" width="100" height="100" fill="red" stroke="blue"/> <ellipse id="herb" cx="250" cy="50" rx="50" ry="100" transform="rotate(90)" style="transform-box:fill-box;transform-origin:50% 50%;"/> <ellipse id="rosemary" cx="150" cy="50" rx="50" ry="100" transform="rotate(90)" style="transform-box:fill-box;transform-origin:50% 50%;"/> <ellipse id="face" cx="150" cy="50" rx="150" ry="200" transform="rotate(90)" style="transform-box:fill-box;transform-origin:50% 50%;"/> </svg>
반응형
'svg' 카테고리의 다른 글
svg paper.js : importSVG(url,options) (0) | 2024.01.30 |
---|---|
svg : using paper.js library ; this is amazing! (1) | 2024.01.28 |
svg animation; roses (0) | 2024.01.23 |
svg nested g : animation (0) | 2024.01.20 |
svg: outermost svg tag and other container elements (0) | 2024.01.19 |