Comments (8)
I have the same concern! Is there anyway to control the speed of the animation?
from draw-fill-svg.
@beaver-creation
Actually if you open the script you can change the value of the animation speed and the transition by editing the following values
// apply new transitions path.style.transition = path.style.WebkitTransition = "stroke-dashoffset 1s ease-in-out";
[ 1s ]
Is how much time it takes to animate,
[ ease-in-out ]
Is the type of transition you want you use; you can rely on the documentation below in order to know what kind of animation you can use:
from draw-fill-svg.
@beaver-creation
I am not sure for the opacity but the following code should be a hint.
// edit props path.style.fillOpacity = 1; path.style.strokeOpacity = 0;
from draw-fill-svg.
Thanks Ojoseph !
But finally i use this script Vivus SVG.
from draw-fill-svg.
@beaver-creation
i used it too but i was not able to trigger the fill animation. Think you have a hint?
from draw-fill-svg.
@ojoseph
No idea :/ I just use it with the line, not the fill. I think its write in the doc 👍
from draw-fill-svg.
@beaver-creation
Thanks, I've checked the documentation and it seems paths cannot be filled.
from draw-fill-svg.
That suggested library looks pretty detailed. You're right about editing the props in the script though, that'll do it. To trigger the fill on that lib, you'll probably have to edit the script. If you notice, they have a myCallback
param that you can pass. There, you can target all paths and transition the stroke-opacity
from 1
to 0
, and likewise transition the fill
from 0
to 1
.
from draw-fill-svg.
Related Issues (2)
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 draw-fill-svg.