Fill svg from left to right

Question

I'm new to svg, I was trying to fill color in a path/circle. I was able to fill it with transition.

But I was wondering is there a way to fill the svg from left to right of the path/circle.

SVG

<svg viewBox="0 0 160 160" width="160" height="160">
  <circle cx="80" cy="80" r="50" />
</svg>

CSS

circle {
  transition: all 3s;
}

JS

setTimeout(function(){
  $('circle').css('fill', 'red');
},300);

How to fill in particular direction, like left to right?

Codepen

Antimonyl

Answer 1

As "fill left to right" can mean a lot of things, I made a few examples:

Moving a gradient:

I would suggest using the SVG <linearGradient> and <animate> tags. That way you don't need the JS or CSS.

Here is a guide to animating gradients in SVG: http://designmodo.com/animate-svg-gradients/ And one to SVG animations in general: https://css-tricks.com/guide-svg-animations-smil/

In your case (fill left to right), I would do it like this:

<svg viewBox="0 0 160 160" width="160" height="160">
    <defs>
        <linearGradient id="lightGradient">
            <stop offset="0%" stop-color="red">
                <animate attributeName="stop-color" values="black; red" dur="3s" fill="freeze" /> 
            </stop>
            <stop offset="100%" stop-color="black">
                <animate attributeName="stop-color" values="black; red" dur="3s" fill="freeze" begin="3s"/> 
            </stop>
        </linearGradient>
    </defs>
    <circle cx="80" cy="80" r="50" fill="url(#lightGradient)"/>
</svg>

Technically it's cheating, as the gradient doesn't actually move, but the colours on both sides change, but it looks pretty much the same. It starts out with a gradient from black to black, then the left side changes to red, giving the illusion that red moves in from the left. After the left side is red, the right side changes from black to red and it looks like the gradient is moving to fill the whole circle.

Clear border between left and right:

Probably best to use a <clip-path> for this:

<clipPath id="left-to-right">
    <rect x="130" y="30" width="0" height="100" >
        <animate attributeName="width" values="0;100" dur="3s" fill="freeze"/>   
    </rect>
</clipPath>
...
<circle cx="180" cy="80" r="50" fill="black"/>
<circle cx="180" cy="80" r="50" fill="red" clip-path="url(#left-to-right)"/>

This one draws a black circle, then draws a red circle over it inside a growing clipping area.

One circle obscuring the other:

Again, <clip-path> works for this:

<clipPath id="steady">
    <circle cx="280" cy="80" r="50"/>
</clipPath>
...
<circle cx="280" cy="80" r="50" fill="red" clip-path="url(#steady)">
    <animate attributeName="cx" values="180;280" dur="3s" fill="freeze"/>
</circle>

This one uses a circular clipping area and moves the second circle within it.

Here it is in Codepen: http://codepen.io/anon/pen/aOKeYQ

Isoniazid

Answer 2

It's possible, but not with just using 'fill'.

You can e.g do a linear gradient fill, with two stops, one being the color you want and the other fully transparent. Then animate the offset of the second gradient stop. For an example see here.

Another way is using a clip-path, where the clip shape is a rect that is animated e.g from left to right. That can then be applied to a copy of the shape that you want to fill like this. Basically you need the starting shape (unfilled) and an ending shape (filled), where the final shape gets displayed by animating the clip-path.

Deuteranope