svg width="500" height="400">
<script>
<![CDATA[
var appui=false,cible="",xd2=0,yd2=0,xd1=0,yd1=0,objet="";

function bouger(evt)
{
xm=evt.getClientX();ym=evt.getClientY();
if ((xm<=5)||(xm>=495)||(ym<=5)||(ym>=395)) {appui=false}
else
{if (((cible=="rectangle")||(cible=="cercle"))&&(appui==true))
{svgdoc=evt.getTarget().getOwnerDocument();
tran=objet.getAttribute("transform");
j=1;for (i=1;i<5;i++) {posi=tran.indexOf(" ",j+1);j=posi};
tran=tran.substring(0,posi);
depx=xm+xd1-xd2;depy=ym+yd1-yd2;
if (cible=="rectangle")
{if (depx<0) {depx=0};if (depx>400) {depx=400};if (depy<0) {depy=0};if
(depy>350) {depy=350}};
if (cible=="cercle")
{if (depx<50) {depx=50};if (depx>450) {depx=450};if (depy<50) {depy=50};if
(depy>350) {depy=350}};
poly=tran+" "+depx+" "+depy+")";
objet=svgdoc.getElementById(cible);
objet.setAttribute("transform",poly)
 
}}}
 
function lacher(evt)
{
appui=false}
 
function cliquer(evt)
{
cible=evt.getTarget().getAttribute("id");svgdoc=evt.getTarget().getOwnerDocu
ment();
if ((cible=="rectangle")||(cible=="cercle"))
{appui=true;
xm=evt.getClientX();ym=evt.getClientY();
objet=svgdoc.getElementById(cible);
tran=objet.getAttribute("transform");j=1;
for (i=1;i<5;i++) {posi=tran.indexOf(" ",j+1);j=posi}
posi2=tran.lastIndexOf(" ");
tranx=tran.substring(posi,posi2);xd1=parseInt(tranx,10);
longue=tran.toString().length-1;posi2=posi2+1;
trany=tran.substring(posi2,longue);yd1=parseInt(trany,10);
xd2=xm;yd2=ym}}
]]>
</script>
 
<g onmousemove="bouger(evt)" onmousedown="cliquer(evt)"
onmouseup="lacher(evt)">
<rect x="0" y="0" width="500" height="400" style="stroke-width:1;
stroke:#0E0E0E; fill:#EEEEEE"/>
<rect id="rectangle" x="0" y="0" width="100" height="50" transform="matrix(1
0 0 1 50 50)" style="stroke-width:1; stroke:#0E0E0E; fill:red"/>
<ellipse id="cercle" cx="0" cy="0" rx="50" ry="50" transform="matrix(1 0 0 1
300 200)" style="stroke-width:1; stroke:#0E0E0E; fill:green"/>
</g>
</svg>