Is it possible to make SVG fill color from bottom to top based on a percentage?

Question

<svg viewbox="-20 -20 100 100"> <circle r="15.29563" cx="0" stroke="#7dc4c2" fill="#5ea4a2"> </svg> 

How to fill the circle as shown below, in percentage!

http://i.stack.imgur.com/gVAN5.png

Thanks in advance.

Answer 1

You can use a gradient with opacity for this. you would add two “middle” stops with opacity of 0 and 1, respectively, to set the offset as to the percentage you need.

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"> <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0"> <stop offset="0%" stop-opacity="1" stop-color="royalblue"/> <stop offset="40%" stop-opacity="1" stop-color="royalblue"/> <stop offset="40%" stop-opacity="0" stop-color="royalblue"/> <stop offset="100%" stop-opacity="0" stop-color="royalblue"/> </linearGradient> <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/> </svg> 

you could even revive it

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"> <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0"> <stop offset="0%" stop-opacity="1" stop-color="royalblue"/> <stop offset="40%" stop-opacity="1" stop-color="royalblue"> <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/> </stop> <stop offset="40%" stop-opacity="0" stop-color="royalblue"> <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/> </stop> <stop offset="100%" stop-opacity="0" stop-color="royalblue"/> </linearGradient> <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/> </svg> 

the advantage is that it works with any shape and size without changing the gradient

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300" width="400" height="200"> <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0"> <stop offset="0%" stop-opacity="1" stop-color="royalblue"/> <stop offset="40%" stop-opacity="1" stop-color="royalblue"/> <stop offset="40%" stop-opacity="0" stop-color="royalblue"/> <stop offset="100%" stop-opacity="0" stop-color="royalblue"/> </linearGradient> <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/> <circle cx="250" cy="150" r="145" fill="url(#lg)" stroke="crimson" stroke-width="5"/> <rect x="400" y="20" width="100" height="100" fill="url(#lg)" stroke="crimson" stroke-width="5"/> <path d="M50 150L95 290 h-90z" fill="url(#lg)" stroke="crimson" stroke-width="5"/> <path d="M450 205 A45 45 0 0 1 450 295A100 100 0 0 0 450 205z" fill="url(#lg)" stroke="crimson" stroke-width="5"/> </svg> 

Answer 2

The easiest way to do this is to create a mask with a circular hole in it, and then animate the rectangle behind it. For instance:

 <path fill="#fff" fill-rule="evenodd" d="M0 0 200 0 200 200 0 200ZM20 100 A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z"/> 

Here, these paths start with a square square of 200 units wide ( M0 0 200 0 200 200 0 200Z ), and then two arcs are used to draw a circle with a diameter of 80 units in it ( A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z ) . The evenodd fill evenodd ensures that a circle is cut out of a square.

If you want the circle to fill from bottom to top, you will need to use the rotate transform:

 <rect transform="rotate(180 100 100)" x="20" y="20" width="160" height="0" fill="#47f" id="fillup"/> 

This rotates the coordinate system around the middle of the SVG image, so that the line grows up as you increase its height. Here I use the CSS transition to change the height of the rectangle when you hover over it. But you can use Javascript or JQuery to change the height as you wish.

Here is a working example:

 svg #fillup { height:0px; transition:height 0.5s; } svg:hover #fillup { height:160px; } 

 <svg width="200" height="200" viewBox="0 0 200 200"> <rect x="10" y="10" width="180" height="180" fill="#eee"/> <rect transform="rotate(180 100 100)" x="20" y="20" width="160" height="0" fill="#47f" id="fillup"/> <path fill="#fff" fill-rule="evenodd" d="M0 0 200 0 200 200 0 200ZM20 100 A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z"/> <circle cx="100" cy="100" r="90" fill="none" stroke="#888" stroke-width="20"/> <circle cx="100" cy="100" r="99" fill="none" stroke="#333" stroke-width="1"/> <circle cx="100" cy="100" r="80" fill="none" stroke="#333" stroke-width="1"/> </svg>