In its simplest form, I want to make a download page, such as on this site .

I want to use my own SVG logo (which I made in Illustrator) and fill the logo horizontally when the page loads.

Like progress bar clipping SVG masks (or something similar).

1 answer 1

The easiest way to do this is to fill the logo using a gradient.

<linearGradient id="progress"> <stop id="stop1" offset="0" stop-color="black"/> <stop id="stop2" offset="0" stop-color="grey"/> </linearGradient>

You just need to change the offset value on both <stop> elements to the percentage you want - either 0-> 1 or 0% -> 100% . For example:

The function may be something like this:

function setProgress(amt) { amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt; document.getElementById("stop1").setAttribute("offset", amt); document.getElementById("stop2").setAttribute("offset", amt); }

This approach works for any SVG element, be it text, as in the demo below, or a complex logo of the paths.

 function setProgress(amt) { amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt; document.getElementById("stop1").setAttribute("offset", amt); document.getElementById("stop2").setAttribute("offset", amt); } // Simple test of setProgress(). // We step up from 0 to 1 using timeouts val = 0; doTimeout(); function doTimeout() { setProgress(val); val += 0.01; if (val <= 1) { setTimeout(doTimeout, 30); } } 
 text { font: 'Times Roman', serif; font-size: 125px; fill: url(#progress); } 
 <svg width="650" height="150"> <defs> <linearGradient id="progress"> <stop id="stop1" offset="0" stop-color="black"/> <stop id="stop2" offset="0" stop-color="grey"/> </linearGradient> </defs> <text x="20" y="120">TILL JANZ</text> </svg>

Another example is the seasonal change in the color of the trees.

 function setProgress(amt) { amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt; document.getElementById("stop1").setAttribute("offset", amt); document.getElementById("stop2").setAttribute("offset", amt); } // Simple test of setProgress(). // We step up from 0 to 1 using timeouts val = 0; doTimeout(); function doTimeout() { setProgress(val); val += 0.01; if (val <= 1) { setTimeout(doTimeout, 30); } } 
 #tree1 { fill: url(#progress); } 
 <svg width="267" height="347" viewBox="0 0 267 347"> <defs> <linearGradient id="progress"> <stop id="stop1" offset="0" stop-color="#D3B300"/> <stop id="stop2" offset="0" stop-color="green"/> </linearGradient> </defs> <g id="tree1"> <path id="Trunk" d="m119 262 28 0 0 86-28-2z" style="fill:#502d16;stroke:#000"/> <path id="Leaves" d="M261 327 169 244c16 9 103 34 76 15-25-18-81-74-81-74 8 5 94 45 71 27-24-19-78-88-78-88 7 5 42 11 42 11-24-13-47-73-47-73 11 8 21 7 21 7C149 51 133 0 133 0c0 0-15 51-39 69 0 0 9 1 21-7 0 0-23 60-47 73 0 0 35-7 42-12 0 0-38 58-78 89-20 15 61-23 69-28 0 0-25 38-75 85-14 14 63-13 72-25 0 0-70 64-88 86-6 7 123-56 123-56 0 0 133 70 129 52z" /> </g> </svg>