I'm trying to implement CSS animation by using svg.
I am expecting that 2 svg boxes is rotating (spinning) with transform-origin: center center;
360 degrees. Looks like it behave what I expected with Chrome and Firefox but not with macOS 10.12 (High Sierra) and iOS 11.0.x and 11.1 beta Safari.
Seems like transform-origin: center center;
does not work in Safari?
Is there any way to fix this issue?
What I expect:
What I see on Safari:
Here is a sample code
HTML:
svg(width=500, height=500, viewBox='0 0 500 500')
rect(x=100, y=100, width=50, height=100)
rect(x=400, y=100, width=50, height=100)
CSS:
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
rect {
transform-origin: center center;
animation-duration: 3s;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
&:nth-child(1) {
fill: red;
}
&:nth-child(2) {
fill: blue;
}
}
You can see the behavior here by accessing with Chrome and Safari: https://codepen.io/manaten/pen/aLeXjW
EDIT:
https://codepen.io/manaten/pen/aVzeEK Another example of the issue. Looks like origin is set to be the center of svg element by Safari.
try transform-box:fill-box; this defines the layout box, to which the transform and transform-origin properties relate to
transform-box: fill-box; seems to solve the issue.
rect {
transform-origin: center center;
transform-box: fill-box;
animation-duration: 3s;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
&:nth-child(1) {
fill: red;
}
&:nth-child(2) {
fill: blue;
}
}
Your first sample with transform-box:
https://codepen.io/MichaelSchober/pen/QOPbKx
Works on MacOs HighSierra 10.13.1 with Safari 11.0.1
The property is still experimental tough. So make sure to check if you are okay with the browser compabtility:
https://developer.mozilla.org/de/docs/Web/CSS/transform-box
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With