1

I'm confused about the transform-origin property.

According to the latest SVGV 2 draft it's a required CSS property.

According to the MDN page on SVG Presentation Attributes it's not a CSS properties that can be used as attributes on SVG elements. However according to that same page, most browsers support it as an attribute. And according to the MDN page on transform-origin it sounds like it is an SVG attribute.

Other SVG user agents/editors such as Inkscape don't seem to support it either as an attribute or as a style property. Inkscape uses its own inkscape:transform-center-x and inkscape:transform-center-y attributes instead.

  • Is transform-origin a standard SVG 2 attribute?

  • If not, why do browsers support a transform-origin attribute?

  • Is there any plan to clear up its standardization?

Helloer
  • 417
  • 3
  • 13

2 Answers2

2

In SVG 1.1 pretty much all CSS properties are also available as mapped attributes i.e. you can write style="display: none" or display="none"

When the SVG 2 specification was first created the authors suggested that this would not be continued with new CSS properties i.e. they would not be mapped to attributes.

Chrome and Safari however, mapped transform-origin to an attribute and eventually to be compatible with content that was starting to appear that depended on that, Firefox did too.

There's an open issue on the SVG 2 specification proposing that the specification should be changed to reflect reality.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • Thank you for clarifying. This is what I was looking for. What surprises me is that the issue on the SVG 2 specification is actually closed and they even committed a fix to this. Yet that commit is not included in any branch and the standard still doesn't mention the attribute. – Helloer Sep 18 '21 at 14:08
1

I'm not quite sure what the confusion is but this quote from MDN may be helpful:

The transform-origin SVG attribute sets the origin for an item’s transformations.

You can use this attribute with any SVG element.

Note: As a presentation attribute in SVG, transform-origin corresponds in syntax and behavior to the transform-origin property in CSS, and can be used as CSS property to style SVG. See the CSS transform-origin property for more information.

It may be that there is some confusion between a CSS property and an attribute. They are not the same things though in this case they have the same behavior.

I have not had a problem using it either via CSS or as an attribute. If there is still a problem perhaps you could post some code which demonstrates it and we can have another look.

A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • No `transform-origin` attribute is mentioned in any SVG standard, and the MDN page on Presentation Attributes lists all the "SVG presentation attributes are CSS properties that can be used as attributes on SVG elements", but `transform-origin` doesn't appear in that list. I can see that the browsers support that SVG attribute, but I'm wondering if it's a standard SVG attribute, or some non-standard attribute that all browsers agreed on. – Helloer Sep 18 '21 at 13:54
  • Agreed, but it does appear in the 'caniuse' type table at the end of the MDN article so there's a possible inconsistency - and it does seem to work in practice, though I can't claim to have done extensive testing on every browser of course. – A Haworth Sep 18 '21 at 14:03
  • Yes, browsers do support it, the "caniuse" table is correct. I am wondering though whether this is the standard or not. ...This could be a question on its own, but should an independent SVG renderer follow the standard or the browsers' approach? I'm curious to understand what the standard says to decide how third party SVG renderers should behave. – Helloer Sep 18 '21 at 14:07