How move svg element?

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

How move svg element?

xiongh
I'm using this file for move svg element:


<?xml version="1.0" encoding='iso-8859-1'?>
<svg width='800' height='800' onload='init(evt)'>
<script>
<![CDATA[
var appui=false,cible='',xt1=0,yt1=0,objet='',svgdoc='';
function init(evt)
{ svgdoc=evt.target.ownerDocument;
        obj=svgdoc.getElementById('text1');
        contour=obj.getBBox();
        trace='M'+contour.x+' '+contour.y+' l'+contour.width+' 0 0
'+contour.height+' -'+contour.width+' 0z';
        obj=svgdoc.getElementById('boite1');
        obj.setAttribute('d',trace)

        svgdoc=evt.target.ownerDocument;
        obj=svgdoc.getElementById('text2');
        contour=obj.getBBox();
        trace='M'+contour.x+' '+contour.y+' l'+contour.width+' 0 0
'+contour.height+' -'+contour.width+' 0z';
        obj=svgdoc.getElementById('boite2');
        obj.setAttribute('d',trace)

        svgdoc=evt.target.ownerDocument;
        obj=svgdoc.getElementById('text4');
        contour=obj.getBBox();
        trace='M'+contour.x+' '+contour.y+' l'+contour.width+' 0 0
'+contour.height+' -'+contour.width+' 0z';
        obj=svgdoc.getElementById('boite4');
        obj.setAttribute('d',trace)

}
function bouger(evt)
        {
        xm=evt.clientX;
        ym=evt.clientY;
        if ((cible=='boite1')&&(appui==true))
        {
                objet=svgdoc.getElementById('text1');
                var
xt2=parseInt(objet.getAttribute('cx')),yt2=parseInt(objet.getAttribute('cy'));
                var depx=xt2+xm-xt1,depy=yt2+ym-yt1;
                objet.setAttribute('cx',depx);
                objet.setAttribute('cy',depy);
                contour=objet.getBBox();
                target=svgdoc.getElementById(cible);
                trace='M'+contour.x+' '+contour.y+' l'+contour.width+' 0 0
'+contour.height+' -'+contour.width+' 0z';
                target.setAttribute('d',trace);xt1=xm;yt1=ym
        }

        if ((cible=='boite2')&&(appui==true))
        {
                objet=svgdoc.getElementById('text2');
                var
xt2=parseInt(objet.getAttribute('x')),yt2=parseInt(objet.getAttribute('y'));
                var depx=xt2+xm-xt1,depy=yt2+ym-yt1;
                objet.setAttribute('x',depx);
                objet.setAttribute('y',depy);
                contour=objet.getBBox();
                target=svgdoc.getElementById(cible);
                trace='M'+contour.x+' '+contour.y+' l'+contour.width+' 0 0
'+contour.height+' -'+contour.width+' 0z';
                target.setAttribute('d',trace);xt1=xm;yt1=ym
        }


        if ((cible=='boite4')&&(appui==true))
        {
                objet=svgdoc.getElementById('text2');
                var
xt2=parseInt(objet.getAttribute('cx')),yt2=parseInt(objet.getAttribute('cy'));
                var depx=xt2+xm-xt1,depy=yt2+ym-yt1;
                objet.setAttribute('cx',depx);
                objet.setAttribute('cy',depy);
                contour=objet.getBBox();
                target=svgdoc.getElementById(cible);
                trace='M'+contour.x+' '+contour.y+' l'+contour.width+' 0 0
'+contour.height+' -'+contour.width+' 0z';
                target.setAttribute('d',trace);xt1=xm;yt1=ym
        }



}
function lacher(evt)
        {
                appui=false
        }
function cliquer(evt)
{
        cible=evt.getTarget().getAttribute('id');
        if (cible=='boite1')
        {
        appui=true;xt1=parseInt(evt.clientX);yt1=parseInt(evt.clientY);
        }
        if (cible=='boite2')
        {
        appui=true;xt1=parseInt(evt.clientX);yt1=parseInt(evt.clientY);
        }

        if (cible=='boite4')
        {
        appui=true;xt1=parseInt(evt.clientX);yt1=parseInt(evt.clientY);
        }
}

]]>

</script>

<g onmouseup='lacher(evt)'>
        <rect x='0' y='0' width='400' height='400' fill='white'/>
        <g onmousemove='bouger(evt)' onmousedown='cliquer(evt)'>
                <circle id="text1" cx="100" cy="100" r="70"  style="fill:red"/>
                <path id='boite1' d='M0 0' opacity='0'/>
        </g>

        <g onmousemove='bouger(evt)' onmousedown='cliquer(evt)'>
                <rect id="text2" x="10"  y="50"  width="150" height="75" fill="red"/>
                <path id='boite2' d='M0 0' opacity='0'/>
        </g>

        <g onmousemove='bouger(evt)' onmousedown='cliquer(evt)'>
                <circle id="text1" cx="200" cy="200" r="50"
style="stroke:red;fill:red"/>
                <path id='boite1' d='M0 0' opacity='0'/>
        </g>

</g>
</svg>

But only two element (text1 and text2) move in the page.Why?

_______________________________________________
Mozilla-svg mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-svg
Reply | Threaded
Open this post in threaded view
|

Re: How move svg element?

xiongh
I'm a stupid,sorry.I have solved.
Now I have another question.
I wish to bild some figure as for example circle rect ellipse and in
the second moment to tie these elements with a
line that moves at the same time with the elements.Is it possibole?

_______________________________________________
Mozilla-svg mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-svg