internet explorer - Svg rotation animation with css not working on ie or edge -

-

i'm working on animation of spinner on svg. unfortunately, i'm having trouble ie or edge. every other browser supported.

here codepen: http://codepen.io/skjnldsv/pen/oxyjoq

as can see opacity animation works, not rotate. there kind of prefix i'm missing, or svg support broken in ie/edge?

thanks

here 2 svg, first 1 not working, second 1 ok.

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

just had same issue myself. after digging around found out css transforms in svg's not supported edge @ moment. it's annoying option use javascript animate svg on edge.

you can follow status of feature on microsoft edge site.

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


Comments

Post a Comment

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

-
i've error when launch playbook don't found why.... error! field 'hosts' required not set there main.yml : --- - hosts: hosts - vars: - elasticsearch_java_home: /usr/lib/jmv/jre-1.7.0 - elasticsearch_http_port: 8443 - tasks: - include: tasks/main.yml - handlers: - include: handlers/main.yml and /etc/ansible/hosts : [hosts] 10.23.108.182 10.23.108.183 10.23.108.184 10.23.108.185 when test ping, : [root@poste08-08-00 elasticsearch]# ansible hosts -m ping 10.23.108.183 | success => { "changed": false, "ping": "pong" } 10.23.108.182 | success => { "changed": false, "ping": "pong" } 10.23.108.185 | success => { "changed": false, "ping": "pong" } 10.23.108.184 | success => { "changed": false, "ping": "pong" } please, me :) regards, you have syntax error in playbook.
Read more

customize file_field button ruby on rails -

-
i'm trying rid of ugly button rails has default file upload. want add glyphicon <%= f.file_field :image_url, class:"glyphicon glyphicon-camera" %> this didn't work , have tried other things in different post saw on page, don't attach file. as suggested here bootstrap filestyle , can use bootstrap's filestyle style file upload buttons. step-1: add layout application.html.erb i have added bootstrap filestyle library cdn. should make sure have both jquery , boostrap loaded. <script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.filestyle/1.1.0/js/bootstrap-filestyle.min.js"> </script> step-2: add corresponding js file: $(":file").filestyle({input: false}); step-3: image_url file field follows: <%= f.file_field :image_url,class: "filestyle", "data-input" => false %>
Read more

SoapUI on windows 10 - high DPI/4K scaling issue -

-
Image
soapui doesn't seem dpi-aware , displays small on high dpi screen (tiny text , buttons). other applications running fine (screen resolution 3840 x 2160). version : soapui 5.1.2 os : windows 10 i have tried: configure soapui run "disable display scaling on high dpi settings" - parts of soapui looking bigger , don't display (image) changing resolution changing font size (preferences > editor settings > select font...) therefore assume, soapui pretends dpi-aware, not scale itself. have same issue? this workaround until developers round making version dpi-aware. step 1: add registry key hkey_local_machine\software\microsoft\windows\currentversion\sidebyside\preferexternalmanifest (dword) 1 step 2: add manifest file 'soapui-5.2.1.exe.manifest' in same directory 'soapui-5.2.1.exe' content of manifest file: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <assembly xml
Read more