Search the web
Sign In
New User? Sign Up
svg-developers · SVG Developers

Group Information

  • Members: 5414
  • Category: Data Formats
  • Founded: Aug 16, 1999
  • Language: English
? Already a member? Sign in to Yahoo!

Yahoo! Groups Tips

Did you know...
Message search is now enhanced, find messages faster. Take it for a spin.

Messages

  Messages Help
Advanced
Scaling from center point of element   Message List  
Reply Message #65512 of 65551 |
Re: [svg-developers] Re: Scaling from center point of element

These appear to be bugs in WebKit and Opera.

I've annotated the file with a rectangle showing the bounding box of the
containing group:

http://brian.sol1.net/svg/tests/bbox.svg

In Firefox the red circle matches the centre of the rectangle which
shifts as expected.

In WebKit the bounding box returned for the containing group is not the
tightest fitting axis-aligned rectangle, there is often extra space.

In Opera the bounding box does not incorporate the transformation
applied to the child element, i.e. does not change.

Based on [1] I think Firefox is doing the right thing here.

Best regards,

Brian

[1] http://www.w3.org/TR/SVG11/types.html#__svg__SVGLocatable__getBBox

(2012/01/26 8:47), dirk_w_schulze wrote:
>
>
> 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 svg-developers@yahoogroups.com
> <mailto:svg-developers%40yahoogroups.com>, "th_w@..." <th_w@...> wrote:
> >
> > --- In svg-developers@yahoogroups.com
> <mailto:svg-developers%40yahoogroups.com>, "th_w@" <th_w@> wrote:
> > >
> > > --- In svg-developers@yahoogroups.com
> <mailto:svg-developers%40yahoogroups.com>, 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.
> >
>
>




Thu Jan 26, 2012 11:41 pm

brianskold
Offline Offline
Send Email Send Email

Message #65512 of 65551 |
Expand Messages Author Sort by Date

Hi! I'm having trouble scaling a g-tag from center point. The item will grow right/bottom, but I need to scale the element from its center point, growing in...
gjella Offline Send Email Jan 25, 2012
1:17 am

As often as I've seen this question in the past n years (for some n > k) I'd have to resurrect the suggestion that scaling and rotation relative to the center...
David Dailey
ddailey@... Send Email
Jan 25, 2012
2:11 am

... Yep, and the plan to enable this is for SVG2 to follow the combined SVG/CSS Transforms spec, where transform will become a property (instead of an...
Cameron McCormack
heycam_yg Offline Send Email
Jan 25, 2012
2:19 am

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...
David Dailey
ddailey@... Send Email
Jan 25, 2012
2:56 am

... 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...
Cameron McCormack
heycam_yg Offline Send Email
Jan 25, 2012
3:01 am

... Another problem I see is that during the animation the center of the bounding box may constantly be shifting. ...
th_w@...
th_w@ymail.com Offline Send Email
Jan 25, 2012
7:11 am

... Sorry, there must be something wrong here. In Firefox, the red circle is shifting around as I expected, but not in Opera and Chromium....
th_w@...
th_w@ymail.com Offline Send Email
Jan 25, 2012
7:16 am

... It looks like a bug in Firefox IMHO. The transformation shouldn't influence the objectBoundingBox of the element. Thats why both circles stay at the same...
dirk_w_schulze Offline Send Email Jan 26, 2012
1:06 am

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...
dirk_w_schulze Offline Send Email Jan 26, 2012
1:06 am

One of the advantages of the centroid over the center of the bounding box (just a guess) is that the centroid doesn’t change under rotation about a fixed...
David Dailey
ddailey@... Send Email
Jan 26, 2012
12:45 pm

These appear to be bugs in WebKit and Opera. I've annotated the file with a rectangle showing the bounding box of the containing group: ...
Brian Birtles
brianskold Offline Send Email
Jan 26, 2012
11:41 pm
cremnosedum Offline Send Email Jan 27, 2012
6:26 pm
Advanced

Copyright © 2010 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Guidelines NEW - Help