F2F/Auckland 2011/Rotation around center

From SVG

A commonly heard request is to allow SVG elements to be rotated about their center point easily, instead of about an absolute point in user space.

The CSS 2D Transforms spec diverges from SVG transforms in that they have a "rotate(angle)" transform item value, but not a "rotate(angle, cx, cy)" value. Instead, it has a separate transform-origin property that can specify not arbitrary points in user space, but user unit values or percentages relative to the border box of the element.

We should reconcile these. Some possibilities:

  • Drop SVG's "rotate(angle, cx, cy)" syntax and adopt CSS 2D Transform's ability to have transform-origin apply.
  • Extend SVG's "rotate(angle, cx, cy)" syntax to allow bounding box relative values, like transform-origin does, and add this syntax to CSS 2D Transforms, too. Only rotate() items that do not specify the center point would have transform-origin applied to them.

Actually I think it's not clear in CSS 2D Transforms whether transform-origin inserts translations around the entire transform item list, or around each individual rotate() item.