मैं svg का उपयोग करके सीएसएस एनीमेशन को लागू करने की कोशिश कर रहा हूं।
मुझे उम्मीद है कि 2 svg बॉक्स transform-origin: center center;
360 डिग्री के साथ घूर्णन (कताई) है। ऐसा लगता है कि यह क्रोम और फ़ायरफ़ॉक्स के साथ अपेक्षित था लेकिन मैकोज़ 10.12 (हाई सिएरा) और आईओएस 11.0.एक्स और 11.1 बीटा सफारी के साथ नहीं।
transform-origin: center center;
जैसे लगता है सफारी में काम नहीं करता है?आईओएस 11 और मैकोज़ 10.12 सफारी पर टूटी ट्रांसफॉर्म-उत्पत्ति को कैसे ठीक किया जाए?
क्या इस मुद्दे को ठीक करने का कोई तरीका है?
मैं क्या उम्मीद:
क्या मैं सफारी पर देखें:
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)
सीएसएस:
यहाँ एक नमूना कोड
HTML है
आप व्यवहार यहाँ देख सकते हैं क्रोम और सफारी के साथ पहुंच कर: https://codepen.io/manaten/pen/aLeXjW
संपादित करें:
https://codepen.io/manaten/pen/aVzeEK मुद्दे का एक और उदाहरण। ऐसा लगता है कि मूल सफारी द्वारा svg तत्व का केंद्र बन गया है।
नहीं यकीन है कि यह एक फर्क होगा, लेकिन आप विक्रेता उपसर्गों के साथ की कोशिश की? – sol
चूंकि मैं ऑटोप्रिफ़िक्सर का उपयोग करता हूं, यह विक्रेता उपसर्ग पर निर्भर नहीं होना चाहिए – kuma