Uploaded image for project: 'Apache Cordova'
  1. Apache Cordova
  2. CB-11060

SVG stroke-dashoffset animation not working

    XMLWordPrintableJSON

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Won't Fix
    • Affects Version/s: 6.1.0
    • Fix Version/s: None
    • Component/s: cordova-android
    • Environment:

      Android

      Description

      Hello everyone, I am having an issue with my svg animation in Cordova (Version 6.0.0) : dashes are not displayed on my Android (the circle is full).

      Behavior on my Android 5.0 :

      The strange thing is it works on my inspector :

      Here a demo, if you want.

      Here is the HTML :

      <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
          <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
      </svg>
      

      Here is the CSS :

      .path {
          stroke-dasharray: 187;
          stroke-dashoffset: 0;
          -webkit-transform-origin: center;
          transform-origin: center;
          stroke: #4285F4;
          -webkit-animation: dash 1.4s ease-in-out infinite;
          animation: dash 1.4s ease-in-out infinite;
      }
      
      @-webkit-keyframes dash {
          0% {
              stroke-dashoffset: 187;
          }
          50% {
              stroke-dashoffset: 46.75;
          }
          100% {
              stroke-dashoffset: 187;
          }
      }
      @keyframes dash {
          0% {
              stroke-dashoffset: 187;
          }
          50% {
              stroke-dashoffset: 46.75;
          }
          100% {
              stroke-dashoffset: 187;
          }
      }
      

      I have tried to put :

      • negative value, like :
        stroke-dasharray: -187;
      • percent value, like :
        stroke-dasharray: 50%;

        but it doesn't work.

      I have been thinking it was maybe a Cordova problem... Thank you for the help !

        Attachments

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              Citizen Jacques Cornat
            • Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: