iOS11 및 macOS10.12 Safari에서 깨진 변형 원점을 수정하는 방법은 무엇입니까?

Question

svg를 사용하여 CSS 애니메이션을 구현하려고합니다.
2 개의 SVG 상자가 transform-origin: center center; 360도 회전 (회전) 할 것으로 예상됩니다. Chrome과 Firefox에서는 기대했던 것처럼 동작하지만 MacOS 10.12 (High Sierra) 및 iOS 11.0.x 및 11.1 Beta Safari에서는 작동하지 않는 것으로 보입니다.
Safari에서 transform-origin: center center;이 작동하지 않습니다.

이 문제를 해결할 방법이 있습니까?

나는 무엇을 기대 :

은 내가 사파리에서 볼 :

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 :

여기

은 샘플 코드

HTML입니다

당신은 크롬과 사파리에 액세스하여 여기에 동작을 볼 수 있습니다 https://codepen.io/manaten/pen/aLeXjW

편집 : 문제의

https://codepen.io/manaten/pen/aVzeEK 또 다른 예입니다. 원점이 Safari의 svg 요소의 중심으로 설정되어있는 것 같습니다.

Answer 1

try transform-box : fill-box; 이것은 변환 상자와 변형 원점 속성이 관련된 레이아웃 상자를 정의합니다.

Answer 2

변형 상자 : 채우기 상자; 문제를 해결하는 것 같다. 변환 - 상자

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; 
    } 
} 

첫 번째 샘플 : 사파리 11.0.1

속성과 맥 OS HighSierra 10.13.1에

https://codepen.io/MichaelSchober/pen/QOPbKx

작품은 아직 실험 힘든이다. 그래서 당신은 브라우저 compabtility으로 좋아하면 확실히 확인 할 수 있도록 : 그것은 차이를 만들 것입니다

https://developer.mozilla.org/de/docs/Web/CSS/transform-box