定制SVG进度栏填 [英] Custom SVG progress bar fill

问题描述

在最简单的形式，我想做出这样本网站加载页面。

我想用一个自定义的SVG标志（即我在Illustrator已经取得）和水平填补了标志为页面加载。

像SVG剪辑遮罩进度条（或其它）。

请，请帮帮我！

谢谢，乔恩

解决方案

要做到这一点，最简单的方法是使用一个渐变填充。

 ＆LT;的LinearGradient ID =进步＆GT;
   ＆LT;停止ID =停止1偏移量=0停止色=黑/＆GT;
   ＆LT;停止ID =停止2偏移量=0停止色=灰色/＆GT;
＆LT; /＆的LinearGradient GT;
 

您只需要改变的值偏移两个＆LT;停止＆GT; 元素是个你希望 - 无论是0-> 10％ - >100％。例如：

一个例子功能可能是：

 函数setProgress（AMT）
{
  AMT =（AMT℃，）？ 0：（AMT→1）？ 1：AMT;
  的document.getElementById（停止1）的setAttribute（抵消，AMT）。
  的document.getElementById（停止2）的setAttribute（抵消，AMT）。
}
 

此方法适用于任何SVG元素，无论是文字，如在下面的演示，或制成的路径的复杂的标志

\r

\r

函数setProgress（AMT）\r
{\r
  AMT =（AMT℃，）？ 0：（AMT→1）？ 1：AMT;\r
  的document.getElementById（停止1）的setAttribute（抵消，AMT）。\r
  的document.getElementById（停止2）的setAttribute（抵消，AMT）。\r
}\r
\r
  \r
// setProgress的简单测试（）。\r
//我们从0加紧1使用超时\r
VAL = 0;\r
doTimeout（）;\r
\r
功能doTimeout（）{\r
  setProgress（VAL）;\r
  VAL + = 0.01;\r
  如果（VAL＆下; = 1）{\r
    的setTimeout（doTimeout，30）;\r
  }\r
}

\r

文本{\r
  字体：'Times Roman字体，衬线;\r
  字体大小：125px;\r
  填写：网址（#progress）;\r
}

\r

＆LT; SVG WIDTH =650HEIGHT =150＆GT;\r
  ＆LT;＆DEFS GT;\r
    ＆LT;的LinearGradient ID =进步＆GT;\r
      ＆LT;停止ID =停止1偏移量=0停止色=黑/＆GT;\r
      ＆LT;停止ID =停止2偏移量=0停止色=灰色/＆GT;\r
    ＆LT; /＆的LinearGradient GT;\r
  ＆LT; / DEFS＆GT;\r
\r
  ＆LT;文字X =20Y =120＆GT; TILL JANZ＆LT; /文字和GT;\r
＆LT; / SVG＆GT;

\r

\r

\r

In its simplest form, I want to make a loading page like this website.

I want to use a custom SVG logo (that I have made in illustrator) and horizontally fill the logo as the page loads.

Like a SVG clip mask progress bar (or something).

Please, please help me!

Thanks, Jon

解决方案

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>

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:

An example function might be:

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, 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屋！