CODEWITHSUNDEEP
htmlsvgfilldirection
Okky
Okky

Reputation: 10466

Fill svg from left to right

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

Upvotes: 5

Views: 9949

Answers (2)

icke
icke

Reputation: 1578

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

Upvotes: 10

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

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.

Upvotes: 2

Related Questions