I didn't see that you take the bounding box of the grouping element at the beginning :P
But you are rotating around the central point of the shape, that's why both circles stay as they are. The circle would be shifting if the center point of the shape is not exactly on the zero coordinate of its userspace. That it shifts on FF seems to be a bug in FF for polygon elements. You should report it at bugs.mozilla.org. Dirk --- In [email protected], "th_w@..." <th_w@...> wrote: > > --- In [email protected], "th_w@" <th_w@> wrote: > > > > --- In [email protected], Cameron McCormack <cam@> wrote: > > > > > > David Dailey: > > > > Oh good! The center of mass (centroid or first central moment) is also a > > > > graphically relevant construct, so we should think about that too! > > > > Itâs > > > > easily scriptable for integrable curves (well, heck, I suppose they > > > > donât even need to be integrable* do they?) but declarative access to > > > > the centroid would be good for realistic rotation (even sans gravity). > > > > > > Yeah, I should've said that the percentages in transform-origin will be > > > the bounding box of the object. (There is still the issue of *which* > > > bounding box to use -- the geometry one that getBBox() provides, one > > > that include the stroke, markers, etc...) Centroids may also be useful, > > > but supporting bounding boxes is a good simple first step. > > > > > > > Another problem I see is that during the animation the center of the > > bounding box may constantly be shifting. > > > > http://wwwpub.zih.tu-dresden.de/~s9783698/svg/bbRotate.svg > > > > > > <?xml version="1.0" encoding="UTF-8"?> > > <svg xmlns="http://www.w3.org/2000/svg"; width="100%" height="100%" > > onload="init()"> > > <script type="text/ecmascript"> > > var polygon > > var polygonContainer > > var bboxCenterMarker > > > > var angle = 0 > > var angleIncrement = 5 > > var interval = 50 > > > > function init() { > > polygonContainer = document.getElementById('polygonContainer') > > polygon = polygonContainer.getElementsByTagName('polygon')[0] > > bboxCenterMarker = document.getElementById('bboxCenterMarker') > > animate() > > } > > > > function animate() { > > polygon.setAttribute('transform','rotate('+angle+')') > > angle += angleIncrement > > var bbox = polygonContainer.getBBox() > > bboxCenterMarker.setAttribute('cx',bbox.x + .5 * bbox.width) > > bboxCenterMarker.setAttribute('cy',bbox.y + .5 * bbox.height) > > window.setTimeout('animate()',interval) > > } > > </script> > > <g transform="translate(100,100)" id="polygonContainer"> > > <polygon points="-50,-20 50,-20 -30,20, -50,20" stroke="black" > > fill="none"/> > > <circle r="2" fill="green"/> > > <circle r="2" stroke="red" fill="none" id="bboxCenterMarker"/> > > </g> > > <text x="10" y="200">Green circle: Rotation center (initial bounding box > > center)</text> > > <text x="10" y="220">Red circle: Momentary bounding box center</text> > > </svg> > > > > Sorry, there must be something wrong here. In Firefox, the red circle is > shifting around as I expected, but not in Opera and Chromium. > ------------------------------------ ----- 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/
