I have this svg icon that I want to fill with color according to the percentage value, it’s a chart, so it should start from the top left and fill all the way to the right following the line..
function setProgress(amt)
{
amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt;
document.getElementById("stop1").setAttribute("offset", amt);
document.getElementById("stop2").setAttribute("offset", amt);
}
setProgress(0.60);
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 254.25 233.26">
<defs>
<linearGradient id="progress" x1="1" y1="0" x2="0" y2="0">
<stop id="stop1" offset="0" stop-color="#bb8e89"/>
<stop id="stop2" offset="0" stop-color="#f4b6b0"/>
</linearGradient>
</defs>
<g id="Capa_2" data-name="Capa 2">
<g id="Capa_1-2" data-name="Capa 1">
<path class="cls-1" fill="url(#progress)" d="M254.25,17.72,235.32,0,216.38,17.72H227V92.93c0,66.6-25.41,124.48-104.17,124.48S18.63,159.53,18.63,92.93V52.35H0V92.14c0,76.11,32.18,141.12,122.79,141.12,89.77,0,122-65,122-141.12V17.72Z"/>
</g>
</g>
</svg>
2
Answers
First you need to draw a path that is following your shape. Mine is not perfect but still works.
Next you set the width of the stroke to something big like 40 and you make the stroke="url(#progress)"
Now you can use clipPath to clip the wide stroke with your shape:
Finaly you can set the stroke-dasharray of the path to whatever you need. Please observe that
pathLength="100"
I am not 100% sure what you are after.
Exaneta is correct when he shows to use path
stroke
and notfill
With
stroke
you can usestroke-dashArray="[percentage] 100"
Only tricky part then is your arrow-head, to position it dynamically you need
animateMotion
Using a native Web Component because this is what they are meant to do
Making it reactive with observed attribute
percentage
creates:
Added an
onclick
for Stack Overflow Snippet demo only