At 23:19 -0600 26/12/08, G. Wade Johnson wrote: >On Fri, 26 Dec 2008 23:21:56 +0000 >John Delacour <[email protected]> wrote: > > > ...but if I transform an > > object giving the centre of rotation -- transform="rotate(a x y)" -- >> not only do I not get any rotation at all but I lose other >> properties, such as fill-colour. If I supply only the angle then > > it's all right, except that I don't get what I want.... > >One trick I learned a while back was to separate the positioning in a >group (<g/> tag) around the actual object. > >Specify the object in its own little coordinate system and then move >that with the group. For example, if we wanted to place a rectangle >(30x50) at 100, 50 and rotate it by 30 degrees, you could do this: > ><g transform="translate(100, 50)"> > <rect x="-15" y="-25" width="30" height="50" transform="rotate(30)"/> ></g> > >Now the positioning and rotation are completely independent. Notice >that I've selected x and y coordinates that put the center of the >object at 0,0.
Thank you. But surely that means I have to use trigonometry to calculate the position of the fulcrum of my object given a rotation about the arbitrary 0,0 centre, and since my object itself may well be positioned by attachment to another object that is itself rotating at a different rate and elsewhere centred I can see the script becoming quite lengthy and tricky. Perhaps I'm missing something obvious. <?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 width="800" height="400" transform="translate(50 50)" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; xmlns:ev="http://www.w3.org/2001/xml-events";> <g> <circle id="CENTRE" cx="350" cy="150" r="2" fill="none" stroke="red" /> </g> <g> <circle id="ROOT" cx="0" cy="0" r="380" fill="none" stroke="red" /> </g> <g transform="translate(0 0)"> <path d="M350 150 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green" stroke="darkgreen" opacity="0.5" transform="rotate(0)" /> </g> </svg> What I want is to be able to rotate the segment like this: <?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 width="800" height="400" transform="translate(50 50)" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; xmlns:ev="http://www.w3.org/2001/xml-events";> <g> <circle id="CENTRE" cx="350" cy="150" r="2" fill="none" stroke="red" /> </g> <g> <circle id="ROOT" cx="0" cy="0" r="380" fill="none" stroke="red" /> </g> <g> <path d="M350 150 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green" stroke="darkgreen" opacity="0.5" transform="rotate(-45 350 150)" /> </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: mailto:[email protected] mailto:[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/
