Comments (5)
Can’t reproduce. You forgot to specify animation duration in your code sample. This could be a case. (and you don’t need new Snap
, just Snap
is enough.
from snap.svg.
I brought over the code incorrectly, you are right.
The below code shows the problem I am seeing where it doesn't animate the dash offset to zero from 120.
var s = Snap('100%', '100%');
myPath = s.path('M0,0c0,0,0-28.008,0-46.707S0-89,0-89');
myPath.attr({
'fill': 'none',
'stroke': 'red',
'stroke-width': 25,
'stroke-miterlimit': 10,
'stroke-linecap': 'round',
'opacity': 1,
'stroke-dasharray': "120 200",
'stroke-dashoffset': 120
});
myPath.transform('translate(100, 300)');
myPath.animate({'stroke-dashoffset': 0}, 1000);
from snap.svg.
stroke-dashoffset still does not animate in webkit browsers on circle elements.
from snap.svg.
If you need a temporary work around you could always use a general animate func (not a solution I know, but it may help in the mean time)...
http://svg.dabbles.info/snaptut-dasharray.html
var innerCircle = s.circle(150, 150, 80).attr({
fill: "none",
stroke: 'red',
strokeWidth: 30,
strokeDasharray: "10 300 40 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10",
strokeDashoffset: 50
});
Snap.animate(0,400, function( value ){
innerCircle.attr({ 'strokeDashoffset': value })
},5000 );
from snap.svg.
Yes, thank you.
from snap.svg.
Related Issues (20)
- Import Snap using Webpack imports-loader 2.0.0 not working HOT 1
- how to limit the draggable area in snap.svg? HOT 11
- compilation error in dist/snap.svg.js lead to es6 import error
- imports-loader rule is not compatible with [email protected] HOT 2
- Solution for using snap-svg in Vue HOT 2
- '‹'
- Memory leak when there are SVG elements with foreignObject elements
- Docs / Types: Snap.animate with array of numbers
- Add SECURITY.md HOT 1
- how to save workspace in snap.svg? HOT 1
- how to snap object to all edges while drag? HOT 1
- Upgrading targetSDK causes issues loading SVG HOT 2
- Animated clock that worked for version 0.3.0 is failing with version 0.5.1 HOT 1
- Bug on Getting Started page
- how can i config in vite project HOT 2
- how can i config in webpack5.x project
- Incorrect ssl cert expired on snapsvg.io
- SSL Cert not working
- Element.drag() is working well on the PC, but not working well on the pad. HOT 2
- PR adobe-webplatform/snap.svg
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from snap.svg.