No way to set SVG transform-origin attribute?

[rosskhanas]

There is no transformOrigin in a list of supported SVG attributes actually, but it is(transform-origin) supported in DOM.

Current behavior?

Attribute transformOrigin is ignored and a warning is shown in a console that the property is not not supported.

https://jsfiddle.net/4L9sksjx/

It is possible to set transform-origin but there is another error that the attribute is not valid of course, but it is set to the DOM and makes the spinner look correct.

Expected behavior?

The attribute should be set to the g tag.

[gaearon]

It is possible to set transform-origin but there is another error that the attribute is not valid of course, but it is set to the DOM and makes the spinner look correct.

I don’t see another error. Setting just transform-origin works for me (in Chrome):

<g transform-origin="256px 256px" transform="rotate(30)">

https://jsfiddle.net/m8d8uwon/

However, it doesn’t seem like transform-origin is a valid SVG attribute in the first place. I can’t find it in the specification: https://svgwg.org/svg2-draft/attindex.html. It isn’t in MDN either: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute.

This probably is why the above fiddle doesn’t work in Safari or Firefox.

However, there does exist a style property with this name:

<g style={{transformOrigin: "256px 256px"}} transform="rotate(30)">

https://jsfiddle.net/gb64m616/

It still doesn’t work in Safari, but it does work in both Chrome and Firefox. It is a part of CSS Transforms Level 1 spec per MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

So you probably should use that instead.

[rtpg]

transform-origin is now a proper SVG attribute (seen here), spec references below). I believe this is worth re-opening (and investigating whether there are other missing SVG attributes)

[constgen]

eslint-plugin-react has transformOrigin in its white list. And it disallows a use of transform-origin attribute. So looks like React should support this attribute now too.

[panayiotisp]

Indeed the updated specification includes the property and it is a shame react doesn't support it

[eps1lon]

Reopening since transform-origin is now part of the spec.