Fills *will* be animated if defined as a path-based pattern. see this JSFiddle :)

davea0511 commented 7 years ago

Please define your problem or issue as clear as possible.

For a problem, please fill the following:

Vivus version: all

Browser: all

Steps to reproduce it: 1) A standard fill won't get animated, but... 2) Convert the fill to a path-based pattern (easy, see below and see the jsFiddle) and it will be nicely animated by Vivus

note: although changing the fill method is relatively easily done enough by hand, vivus has the capability to be used by regular people (not SVG experts) for whom this task is really too much. This capability could be added to vivus to automatically do the conversion for them, see JSFiddle and below for what is involved.

JSFiddle link (or similar platform): http://jsfiddle.net/davea0511/Lg376abm/

No personal website will be allowed, only sandboxed platform where the code is isolated and can be hacked.

[note] I apologize for not doing the parsing code to make this automatic in vivus. I'm not a programmer, but a total hack and I'd probably screw everything up. I just kind of fell into this solution and thought it worth sharing. To do it all you need is to change the fill to work like so:

<pattern id="pathFill1" patternUnits="userSpaceOnUse" width="2" height="30" >
    <path stroke=[fill color] d="M 1,0 l 0,30" stroke-width="2"/>
</pattern>
<path fill="url(#pathFill1)" ...>

just add this code, and put a variable in there for [fill color]

Pattern notes: 1) I used a pattern height of 30, but if set to something big like 200 the animation will be one long fill instead of looking like closing blinds.
2) I used a pattern width of 2, but it doesn't matter so long as the path stroke origin is half of the width, and the stroke-width must be the same as the pattern width, or more. Perhaps a wider width will be easier on the browser? like width="100", d="M 50 ...", stroke-width=100? I don't know. Just a thought. 3) Combinations of pattern sizes and path stroke definitions create some pretty cool patterns, plaid for example, if you wanted that, or diamonds or dots. Not sure how useful this is ... but there it is.

[/note]

davea0511 commented 7 years ago

Note of course this only works for flat colors ... no gradients or patterns of course ... but again tweaking the pattern routine might be able to do this. Above my head.

maxwellito commented 7 years ago

Hi there, Thanks for your detailed demo. It's pretty promising and there's a lot of potential. I wasn't aware of pattern to be part of the original SVG specs. I try to find a way to integrate it to make a seamless as possible. However I hit a little problem when it comes to get the color of the element to animate. The fill color can be set via a CSS class and that make it more difficult to get. But I'll try to investigate to find a solution. Having that kind of fill animation would be a nice plus :)

Lauwisme commented 5 years ago

Hi @maxwellito, did you ever get around to implement something based on this? I would be very interested if you did!

maxwellito commented 5 years ago

Hi @Lauwisme Sorry I didn't provided any update there. When the issue was created I played a lot with it but couldn't find a way to implement it correctly that work with most use cases :(

maxwellito / vivus