सीएसएस के साथ एसवीजी रोटेशन एनीमेशन यानी

Question

पर काम नहीं कर रहा है, मैं एक एसवीजी पर स्पिनर की एनीमेशन पर काम कर रहा हूं। दुर्भाग्य से, मुझे यानी किनारे के साथ परेशानी हो रही है। हर दूसरे ब्राउज़र का समर्थन किया जाता है। http://codepen.io/skjnldsv/pen/oxyjoQ

आप अस्पष्टता एनीमेशन काम करता है देख सकते हैं, लेकिन नहीं घुमाना:

यहाँ codepen है। क्या कोई प्रकार का उपसर्ग है जो मुझे याद आ रहा है, या एसवीजी समर्थन यानी/किनारे में टूटा हुआ है?

धन्यवाद

यहाँ दो svg, पहले एक काम नहीं कर रहा है, दूसरा एक ठीक है।

<svg xmlns="http://www.w3.org/2000/svg" height="50" width="50"> 
    <style> 
     .spinner { 
      transform-origin: 25px 25px; 
      -webkit-transform-origin: 25px 25px; 
      animation: loading-spin .8s infinite linear; 
      -webkit-animation: loading-spin .8s infinite linear 
     } 
     @-webkit-keyframes loading-spin { 
      100% { -webkit-transform: rotate(360deg); } 
     } 
     @keyframes loading-spin { 
      100% { transform: rotate(360deg); } 
     } 
    </style> 
    <defs> 
     <clipPath id="a"> 
      <path d="M0 0h25v25H0z" /> 
     </clipPath> 
    </defs> 
    <g fill="none"> 
     <circle cx="25" cy="25" r="23" stroke="#000" stroke-opacity=".5" /> 
     <circle class="spinner" cx="25" cy="25" r="23" clip-path="url(#a)" stroke="#191919" stroke-width="3" /> 
    </g> 
</svg> 
<svg xmlns="http://www.w3.org/2000/svg" height="50" width="50"> 
    <style> 
    .spinner2 { 
     transform-origin: 25px 25px; 
     -webkit-transform-origin: 25px 25px; 
     animation: loading-spin2 .8s infinite linear; 
     -webkit-animation: loading-spin2 .8s infinite linear 
    } 
    @-webkit-keyframes loading-spin2 { 
     100% { opacity:0; } 
    } 
    @keyframes loading-spin2 { 
     100% { opacity:0; } 
    } 
    </style> 
    <defs> 
     <clipPath id="a"> 
      <path d="M0 0h25v25H0z" /> 
     </clipPath> 
    </defs> 
    <g fill="none"> 
     <circle cx="25" cy="25" r="23" stroke="#000" stroke-opacity=".5" /> 
     <circle class="spinner2" cx="25" cy="25" r="23" clip-path="url(#a)" stroke="#191919" stroke-width="3" /> 
    </g> 
</svg> 

Answer 1

बस एक ही मुद्दा अपने आप को किया था। चारों ओर खोदने के बाद मुझे पता चला कि एसवीजी में सीएसएस ट्रांसफॉर्म इस समय एज द्वारा समर्थित नहीं हैं। यह वास्तव में कष्टप्रद है लेकिन एज पर एक एसवीजी एनिमेट करने के लिए जावास्क्रिप्ट का उपयोग करने का आपका एकमात्र विकल्प है।

आप माइक्रोसॉफ्ट एज साइट पर सुविधा की स्थिति का पालन कर सकते हैं।

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/supportcsstransformsonsvg/