自定义SVG进度条填充 [英] Custom SVG progress bar fill

查看:20
本文介绍了自定义SVG进度条填充的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

以最简单的形式,我想制作一个像这个网站这样的加载页面.

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆