You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@cordova.apache.org by "Jacques Cornat (JIRA)" <ji...@apache.org> on 2016/04/10 13:01:25 UTC
[jira] [Updated] (CB-11060) SVG stroke-dashoffset animation not
working
[ https://issues.apache.org/jira/browse/CB-11060?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Jacques Cornat updated CB-11060:
--------------------------------
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 :
!http://i.stack.imgur.com/jXObB.png!
Behavior on my chrome 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 !
was:
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://i.stack.imgur.com/jXObB.png!
Behavior on my chrome 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.
Thank you for the help !
> SVG stroke-dashoffset animation not working
> -------------------------------------------
>
> Key: CB-11060
> URL: https://issues.apache.org/jira/browse/CB-11060
> Project: Apache Cordova
> Issue Type: Bug
> Affects Versions: 6.1.0
> Environment: Android
> Reporter: Jacques Cornat
> Priority: Minor
> Labels: animation, css, svg
>
> 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://i.stack.imgur.com/jXObB.png!
> Behavior on my chrome 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