cordova-issues mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Nikhil Khandelwal (JIRA)" <j...@apache.org>
Subject [jira] [Updated] (CB-11060) SVG stroke-dashoffset animation not working
Date Mon, 11 Apr 2016 19:53:26 GMT

     [ https://issues.apache.org/jira/browse/CB-11060?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]

Nikhil Khandelwal updated CB-11060:
-----------------------------------
    Component/s: Android

> SVG stroke-dashoffset animation not working
> -------------------------------------------
>
>                 Key: CB-11060
>                 URL: https://issues.apache.org/jira/browse/CB-11060
>             Project: Apache Cordova
>          Issue Type: Bug
>          Components: Android
>    Affects Versions: 6.1.0
>         Environment: Android
>            Reporter: Jacques Cornat
>            Priority: Minor
>              Labels: animation, css, svg, triaged
>
> 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 :
> !http://image.noelshack.com/fichiers/2016/14/1460286116-jxobb.png!
> The strange thing is it works on my inspector :
> !http://i.stack.imgur.com/PkbZm.png!
> Here a [demo|https://jsfiddle.net/3ponxj55/], if you want.
> Here is the HTML :
> {code: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>
> {code}
> Here is the CSS :
> {code: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;
>     }
> }
> {code}
> I have tried to put :
> * negative value, like : {code}stroke-dasharray: -187;{code}
> * percent value, like : {code}stroke-dasharray: 50%;{code}
> but it doesn't work.
> I have been thinking it was maybe a Cordova problem... Thank you for the help !



--
This message was sent by Atlassian JIRA
(v6.3.4#6332)

---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org


Mime
View raw message