-
Notifications
You must be signed in to change notification settings - Fork 47.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
No way to set SVG transform-origin attribute? #11265
Comments
I don’t see another error. Setting just <g transform-origin="256px 256px" transform="rotate(30)"> https://jsfiddle.net/m8d8uwon/ However, it doesn’t seem like 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. |
|
|
Indeed the updated specification includes the property and it is a shame react doesn't support it |
Reopening since |
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.The text was updated successfully, but these errors were encountered: