mightyscape-1.2/extensions/fablabchemnitz/animate_order/vivus-0.4.6/hacks.md

31 lines
865 B
Markdown
Raw Normal View History

2022-11-04 22:26:10 +01:00
# Vivus hacks
Some tricks about Vivus are very interesting and might help you but doesn't have their place in the documentation. So you will see them here.
## Animate `fill` with CSS
On inline SVG, it's very easy to animate fill color with just a bit of CSS.
Let's imagine you have an inline SVG element in your page with the ID `mySVG`. You apply the following CSS to make it with fill opacity to 0 by default, and a class with the opacity of 1 (with transition). Then once the animation finished, the class can be added to the svg.
```css
/* Style */
#mySVG * {
fill-opacity: 0;
transition: fill-opacity 1s;
}
#mySVG.finished * {
fill-opacity: 1;
}
```
```js
/* JavaScript */
new Vivus('mySVG', {}, function (obj) {
obj.el.classList.add('finished');
});
```
**WARNING**: This hack cannot work on sandboxed solutions like the use of `object` tag.