2017-10-27 14 views
5

मैं svg का उपयोग करके सीएसएस एनीमेशन को लागू करने की कोशिश कर रहा हूं।
मुझे उम्मीद है कि 2 svg बॉक्स transform-origin: center center; 360 डिग्री के साथ घूर्णन (कताई) है। ऐसा लगता है कि यह क्रोम और फ़ायरफ़ॉक्स के साथ अपेक्षित था लेकिन मैकोज़ 10.12 (हाई सिएरा) और आईओएस 11.0.एक्स और 11.1 बीटा सफारी के साथ नहीं।
transform-origin: center center; जैसे लगता है सफारी में काम नहीं करता है?आईओएस 11 और मैकोज़ 10.12 सफारी पर टूटी ट्रांसफॉर्म-उत्पत्ति को कैसे ठीक किया जाए?

क्या इस मुद्दे को ठीक करने का कोई तरीका है?

मैं क्या उम्मीद: What I expect

क्या मैं सफारी पर देखें:

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) 

सीएसएस:

What I see on Safari

यहाँ एक नमूना कोड

HTML है

आप व्यवहार यहाँ देख सकते हैं क्रोम और सफारी के साथ पहुंच कर: https://codepen.io/manaten/pen/aLeXjW

संपादित करें:

https://codepen.io/manaten/pen/aVzeEK मुद्दे का एक और उदाहरण। ऐसा लगता है कि मूल सफारी द्वारा svg तत्व का केंद्र बन गया है।

+0

नहीं यकीन है कि यह एक फर्क होगा, लेकिन आप विक्रेता उपसर्गों के साथ की कोशिश की? – sol

+0

चूंकि मैं ऑटोप्रिफ़िक्सर का उपयोग करता हूं, यह विक्रेता उपसर्ग पर निर्भर नहीं होना चाहिए – kuma

उत्तर

4

ट्रांसफॉर्म-बॉक्स का प्रयास करें: भरें-बॉक्स; यह लेआउट बॉक्स को परिभाषित करता है, जिसमें ट्रांसफॉर्म और ट्रांसफॉर्म-मूल गुण

1

ट्रांसफ़ॉर्म-बॉक्स: भर-बॉक्स से संबंधित हैं; इस मुद्दे को हल करने लगता है।

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

बदलना-बॉक्स के साथ आपका पहला नमूना:

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

सफारी 11.0.1

संपत्ति के साथ MacOS HighSierra 10.13.1 पर काम करता है अभी भी प्रयोगात्मक कठिन है। तो अगर आप ब्राउज़र compabtility साथ ठीक हैं जाँच करने के लिए सुनिश्चित करें:

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

संबंधित मुद्दे