I figured ou it don't works with angles but if I use 1px round angle it works
@bhartvigsen make sure it has stroke properties, if it just has fill properties vivus won't know what to do with it. check this out for how to do fill https://github.com/maxwellito/vivus/blob/master/hacks.md
Is there anything to be done about that? or is just how that hack works?
@maxwellito Well, that actually raised more problems than it solved, here's a js fiddle. when I have it all in one html file, I can get it to load vivus properly, linking to the svg in the vivus constructor, but the css fill trick doesn't work. I inserted the svg into the html for you. also having the same issue I mentioned before, taking several seconds to add the finished class.
Ok, I found out your SVG structure was pretty f**d up (please no offense) but it was based on only 3 paths for such a complex design. I don't know which editor you're using to make your graphics but the output not really friendly with Vivus.
In your SVG every path represent a layer of color instead of one path per element (:a letter or line). Combining all into one path is correct but browsers might struggle to get the total length of the path, which is the crucial information to run Vivus animation.
So I cutted your SVG into smaller pieces : https://jsfiddle.net/pu0n5097/5/
I hope this will help :)
The one we're working on is using a couple of javascript packages like, owl.carousel, jquery, datepicker, and Bootstrap, and it's loaded into modx.
the error we're getting is 'Error: Vivus [constructor]: "element" parameter is not related to an existing ID' but the id is the same as in the jsfiddle you posted
By using animTimingFunction parameter like this :
new Vivus('logoAnimated', {
duration: 200,
animTimingFunction: function() { return 0; }
}, function() {
});
ahhhh, think i can solve my issues with on ready :D
Hi, I am trying to convert svg to animated with the vivus-animated, only have a stroke filling issue, I want to fill the space
How can I SVG fill with animation?
#mySVG * {
fill-opacity: 0;
transition: fill-opacity 1s;
}
#mySVG.finished * {
fill-opacity: 1;
}
the fill animation start before the stroke end
Img ^
Hi, kinda dumb question, but i'm having trouble finding the answer... Does anyone know offhand how to convert font text in an Illustrator file into strokes for SVG? I'm trying to use Vivus Instant, but I'm realizing that the SVG I've created (just my company's name) is composed of font characters.
I just want the animation to draw out each letter of the company name