自定义SVG进度条填充 [英] Custom SVG progress bar fill
问题描述
以最简单的形式,我想制作一个像这个网站这样的加载页面.
In its simplest form, I want to make a loading page like this website.
我想使用自定义 SVG 徽标(我在 Illustrator 中制作的)并在页面加载时水平填充徽标.
I want to use a custom SVG logo (that I have made in illustrator) and horizontally fill the logo as the page loads.
就像一个 SVG 剪辑蒙版进度条(或其他东西).
Like a SVG clip mask progress bar (or something).
请帮帮我!
谢谢乔恩
推荐答案
最简单的方法是使用渐变填充.
The simplest way to do this is with a gradient fill.
<linearGradient id="progress">
<stop id="stop1" offset="0" stop-color="black"/>
<stop id="stop2" offset="0" stop-color="grey"/>
</linearGradient>
您只需将 <stop>
元素上的 offset
值更改为您想要的百分比 - 0->1 或0%"->100%".例如:
You just need to change the value of offset
on both <stop>
elements to be the percentage you want - either 0->1 or "0%"->"100%". For example:
一个示例函数可能是:
function setProgress(amt)
{
amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt;
document.getElementById("stop1").setAttribute("offset", amt);
document.getElementById("stop2").setAttribute("offset", amt);
}
这种方法适用于任何 SVG 元素,无论是文本(如下面的演示),还是由路径组成的复杂徽标.
This approach works for any SVG element, whether it be text, as in the demo below, or a complicated logo made of 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>
这篇关于自定义SVG进度条填充的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!