1

The code below contains a rectangle which can be filled with a percentage and adds up in the rectangular shape according to this sample code from Stack Overflow:

Fill custom SVG image using percentage value

We however need the bucket to be filled with the percentage.

The bucket shape has been drawn using SVG.

The general idea here is that whatever percentage is added, that amount will be filled, in this case, the percentage of water in a bucket:

enter image description here

Code has been adapted for fill="url(#lg)" to be included on the bucket shape in order to have the same functionality as the rectangle but that does not work.

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">

<path d="M220,40 L250,250 L390,250 420,40
  A50,10 0 0,1 220,40
  Q320,10 420,41" 

stroke="black" fill="transparent"/>
  
</svg>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Bradley
  • 37
  • 6
  • Please note that a basic bucket has been drawn using a single path element. Can you kindly advise where fill="url(#lg) would go in the code or the best way to approach the 'percentage fill' effect – Bradley Feb 08 '21 at 13:03
  • Topic has been resolved, thank you! Solution found on the below link: https://stackoverflow.com/questions/32645053/is-it-possible-to-make-svg-circle-fill-color-from-bottom-to-top-based-on-percent – Bradley Feb 08 '21 at 13:20

1 Answers1

2

Filling with a gradient is only possible when the shape outline is closed

That is, the outline of the shape must be drawn using path, polyline, polygon but not multiple lines

I redrawn a bucket in a vector editor where the internal volume that will be filled with a gradient (water) class="bucket_body" has a continuous outline

I also removed the nested svg tags as they are superfluous in my opinion

The gradient fill animation is taken from the link you provided

var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 10000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});
.s0{
    fill:none;
    stroke-width:2.5;
    stroke:#000;
}
.s1{
    fill:none;
    opacity:0.5;
    stroke-linecap:round;
    stroke-width:5;
    stroke:#2F2D1F;
}
.s2{
    fill:none;
    stroke-linecap:round;
    stroke-width:5;
    stroke:#2F2D1F;
} 
.arc{
    fill:none;
    stroke-linecap:round;
    stroke-width:6;
    stroke:#2F2D1F;
}
.s4{
    fill:silver;
    stroke-width:5;
    stroke:black;
}
.bucket_top{
    fill:none;
    stroke-width:10;
    stroke:black;
}  
.bucket_bottom{
    fill:none;
    stroke-width:6;
    stroke:black;
} 
.bucket_body{
    stroke-width:6;
    stroke:black;
    fill:url(#lg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="370" height="230" viewBox="0 0 940 500" version="1.1">
  
<defs>
    <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" repeatCount="1" dur="10s" begin="0s" fill="freeze"/>
          </stop>
          <stop offset="40%" stop-opacity="0" stop-color="royalblue">
            <animate attributeName="offset" values="0;1" repeatCount="1" dur="10s"  begin="0s" fill="freeze"/>
          </stop>
          <stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
      </linearGradient>
</defs>
  <path class="bucket_body" d="m336.1 181.3 52-13.6 64.4-5.6 48.9 1.2 44.6 7.4 27.2 10.5 18.6 11.8c0 0-21.3 121.7-22.9 183.2-0.1 2.9 0.1 5.8 0.6 8.7 0.4 1.9 2.4 3.6 1.7 5.4-3.3 8.6-15.1 10.7-23.7 13.9-14.8 5.4-31 6.3-46.7 8-16.4 1.7-33 2.9-49.5 1.9-19.4-1.2-38.8-4.2-57.6-9.3-10.5-2.8-21-6.2-30.3-11.8-1.6-1-4-1.8-4.3-3.7-4.5-28.9-8.7-88.5-8.7-88.5l-8.4-63.7zM357.2 386.8" />
  <path class="bucket_bottom" d="m357.2 386.8c0 0-2 5.3-1.3 7.9 1.4 5.4 5.8 10 10.5 13.1 10.6 7.1 24.3 8 36.8 10.5 18.4 3.7 37.2 5.8 56 6.6 16.6 0.7 33.4 0.3 49.9-1.8 11.7-1.5 23.4-3.8 34.6-7.4 6.4-2.1 12.5-5 18.4-8.3 3.8-2.2 8.4-3.8 10.9-7.4 1.8-2.6 2.2-9.2 2.2-9.2" />
  <path class="bucket_top" d="m334.4 178c0.3-8.5 12.9-11.6 20.6-15.3 12.5-6 26.7-7.8 40.3-10.5 9.8-1.9 19.8-3.2 29.8-3.9 12.8-0.9 25.7-0.7 38.5-0.4 15.9 0.3 31.8 1.1 47.7 2.2 12.3 0.9 24.7 1.2 36.8 3.5 9.8 1.9 19.6 4.5 28.9 8.3 7.4 3 18.1 4 21 11.4 1.7 4.3-1.2 9.8-4.4 13.1-6.5 6.7-17.2 7.3-26.3 9.6-9.9 2.6-20.1 3.3-30.2 4.8-10.1 1.5-20.1 3.3-30.2 4.4-13.7 1.4-27.4 2.6-41.1 2.6-11.8 0-23.7-1.1-35.5-2.2-11.1-1-22.2-2.2-33.3-3.9-8.4-1.3-16.7-2.9-24.9-4.8-8-1.9-16.4-2.7-23.6-6.6-5.5-2.9-14.3-6.1-14-12.3z" />
  <path class="s4" d="m470.3 214.1c1.8-3.6 6.7-3.3 8.9-8.1 1-2 2.1-4.1 2.4-6.3 2.1-9.6-4.7-16.5 5-21.2 3.1-1 7-1.2 9.8 0.4 2.8 1.7 4.5 5.1 5 8.3 0.7 3.9-2.6 7.8-2.2 11.8 0.7 14.6 12.8 8.5 11.8 18.4-0.1 1.2-1 2.4-2 3.1-3.8 2.5-8.9 1.9-13.3 2.4-4.8 0.6-9.6 0.8-14.4 0.9-3.3 0.1-6.8 0.9-9.8-0.2-0.8-0.3-1.6-0.8-1.9-1.5-1-2.4-0.5-5.5 0.7-7.9z" />
  <path class="s4" d="m435.5 145.7c0 0 0-6.9 0.9-10.2 0.6-2.3 1.4-4.8 3.1-6.5 1.9-1.8 4.5-3.2 7.1-3.1 2.1 0.1 4 1.5 5.6 2.8 1.5 1.2 2.6 3 3.7 4.6 1.2 1.9 2.2 3.8 3.1 5.9 0.8 1.8 1.6 3.6 1.9 5.6 0.1 1 0.7 3.1-0.3 3.1-7.9-0.4-24.8-0.3-24.8-0.3" />
  <path class="arc" d="m446.3 140.7c0 0 13.8-10.2 21-14.9 6.9-4.4 14.2-8.2 21.4-12.4 5.5-3.2 10.8-6.7 16.4-9.6 6.4-3.3 13.2-5.9 19.8-9 5.8-2.7 11.3-6.3 17.3-8.4 6-2.1 12.2-3.8 18.6-4 3.5-0.1 7.3 0 10.5 1.5 3.6 1.7 8 4.1 9 8 1.5 6-3.6 11.9-6.5 17.3-3.1 5.6-7.3 10.6-11.5 15.5-4.8 5.8-10.1 11.1-15.5 16.4-5.5 5.4-11.3 10.6-17 15.8-4.4 4-8.8 8.1-13.3 12.1-4 3.5-8 7.1-12.1 10.5-4.6 3.8-13.9 11.1-13.9 11.1" />
  <ellipse cx="490.5" cy="190.7" rx="3.8" ry="3.7" class="s1"/>
  <ellipse cx="447.1" cy="138.4" rx="3.8" ry="3.7" class="s1"/>
 <text id="count" x="404" y="290" font-size="64" fill=black">100%</text>
</svg>  
</svg>
Alexandr_TT
  • 13,635
  • 3
  • 27
  • 54