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-origina standard SVG 2 attribute?If not, why do browsers support a
transform-originattribute?Is there any plan to clear up its standardization?
CodePudding user response：
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.
CodePudding user response：
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.