Hello, I really can't understand how works a matrix in a matrix !
I have a foreground (containing a point in its center) in which i can zoom in and off. I want, when i zoom in and off, that the point at the center keep its size, and its position in my foreground. Can you please help me ? This my code : Thanks a lot Al ------------ <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> <svg xmlns:svg="http://www.w3.org/2000/svg"; xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; version="1.1" width="620" height="550" onload="INIT(evt)" > <script type="text/ecmascript"> <![CDATA[ var transMatrix = [1,0,0,1,0,0]; function MATRIXTEMP(){ tempMatrix = laCIBLE.getAttributeNS(null, "transform").slice(7,-1).split(" "); Xtemp = parseFloat(tempMatrix[4]); Ytemp = parseFloat(tempMatrix[5]); ECHtemp = parseFloat(tempMatrix[0]); Wtemp = parseInt(laCIBLE.getAttributeNS(null,"width")); Htemp = parseInt(laCIBLE.getAttributeNS(null,"height")); } function ZOOMER(plusOUmoins){ laCIBLE = thisSVG.getElementById("FORGR");; MATRIXTEMP(); // FORGR var newECH = ECHtemp + (LOUPEpas*plusOUmoins); tempMatrix[0] = newECH; tempMatrix[3] = newECH; Xold = (460/2)-Xtemp; Yold = (550/2)-Ytemp; Xreel = Xold/ECHtemp; Yreel = Yold/ECHtemp Xnew = Xreel*newECH; Ynew = Yreel*newECH; dX = Xnew-Xold; dY = Ynew-Yold; tempMatrix[4] = parseFloat(tempMatrix[4])-dX; tempMatrix[5] = parseFloat(tempMatrix[5])-dY; ECHtemp = newECH; newMatrix = "matrix(" + tempMatrix.join(' ') + ")"; laCIBLE.setAttributeNS(null, "transform", newMatrix); // POINTS lePT = thisSVG.getElementById("POINT"); tempMatrixPT = lePT.getAttributeNS(null, "transform").slice(7,-1).split(" "); newECHpt = 1/newECH; tempMatrixPT[0] = newECHpt; tempMatrixPT[3] = newECHpt; //tempMATRIXPT[4] = How to keep the position ? //tempMATRIXPT[5] = How to keep the position ? newMatrixPT = "matrix(" + tempMatrixPT.join(' ') + ")"; lePT.setAttributeNS(null, "transform", newMatrixPT); } function INIT(evt) { LOUPEpas = 0.25; //25% if ( window.svgDocument == null ){ thisSVG = evt.target.ownerDocument; } } ]]> </script> <!-- CARTE --> <svg xmlns:svg="http://www.w3.org/2000/svg"; xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; version="1.1" width="460" height="550"> <g id="BACKGR"> <rect x="0" y="0" width="460" height="550" fill="#CCFFFF" /> </g> <g id="FORGR" transform="matrix(1 0 0 1 0 0)"> <g id="grille" x="0" y="0" width="460" height="550" transform="matrix(1 0 0 1 0 0)"> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="20" y1="0" x2="20" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="20" x2="0" y2="20"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="40" x2="0" y2="40"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="60" x2="0" y2="60"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="80" x2="0" y2="80"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="100" x2="0" y2="100"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="120" x2="0" y2="120"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="140" x2="0" y2="140"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="160" x2="0" y2="160"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="180" x2="0" y2="180"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="200" x2="0" y2="200"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="220" x2="0" y2="220"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="240" x2="0" y2="240"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="260" x2="0" y2="260"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="280" x2="0" y2="280"/> <line fill="none" stroke="#FF0000" stroke-miterlimit="10" x1="460" y1="275" x2="0" y2="275"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="300" x2="0" y2="300"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="320" x2="0" y2="320"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="340" x2="0" y2="340"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="360" x2="0" y2="360"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="380" x2="0" y2="380"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="400" x2="0" y2="400"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="420" x2="0" y2="420"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="440" x2="0" y2="440"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="460" x2="0" y2="460"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="480" x2="0" y2="480"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="500" x2="0" y2="500"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="520" x2="0" y2="520"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="540" x2="0" y2="540"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="40" y1="0" x2="40" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="60" y1="0" x2="60" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="80" y1="0" x2="80" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="100" y1="0" x2="100" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="120" y1="0" x2="120" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="140" y1="0" x2="140" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="160" y1="0" x2="160" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="180" y1="0" x2="180" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="200" y1="0" x2="200" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="220" y1="0" x2="220" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="240" y1="0" x2="240" y2="550"/> <line fill="none" stroke="#FF0000" stroke-miterlimit="10" x1="230" y1="0" x2="230" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="260" y1="0" x2="260" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="280" y1="0" x2="280" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="300" y1="0" x2="300" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="320" y1="0" x2="320" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="340" y1="0" x2="340" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="360" y1="0" x2="360" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="380" y1="0" x2="380" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="400" y1="0" x2="400" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="420" y1="0" x2="420" y2="550"/> <line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="440" y1="0" x2="440" y2="550"/> </g> <g id="POINT" x="230" y="275" width="16" height="16" transform="matrix(1 0 0 1 0 0)"> <rect fill="#C43323" x="222" y="267" width="16" height="16" /> </g> </g> </svg> <!-- ZOOM --> <g id="ZOOM"> <g id="ZOOMOF" onclick="ZOOMER(-1)"> <rect x="460" y="10" width="20" height="20"/> <line fill="none" stroke="#FFFF00" stroke-width="2" stroke-miterlimit="10" x1="465" y1="20" x2="475" y2="20" /> </g> <g id="ZOOMON" onclick="ZOOMER(1)"> <rect x="460" y="40" width="20" height="20" /> <line fill="none" stroke="#FFFF00" stroke-width="2" stroke-miterlimit="10" x1="465" y1="50" x2="475" y2="50" /> <line fill="none" stroke="#FFFF00" stroke-width="2" stroke-miterlimit="10" x1="470" y1="45" x2="470" y2="55" /> </g> </g> </svg> ------------------ ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
