Question

我正在处理的页面包含由七种颜色组成的特定渐变。渐变中的颜色应呈放射状，而不是呈线性方式。圆应该用基于1到100（包括浮点数）的数字的渐变填充，该数字代表所填充圆的百分比。该数字由后端动态发送，是学生的GPA分数。我知道这里已经有类似的问题。像this one或this one。它们在一个关键方面与我的有所不同-我必须动态填充元素，并计算圆形元素的周长，因此我不能使用多条路径。而且这不能仅仅是线性渐变，否则我已经做完了。而且我也不知道如何使用d3.js或类似的东西。

请帮助我，任务将于明天到期。

    const circle = document.querySelector(".progress-ring__circle");
    const radius = circle.r.baseVal.value;
    const circumference = 2 * Math.PI * radius;

    circle.style.strokeDasharray = `${circumference} ${circumference}`;
    circle.style.strokeDashoffset = circumference;

    function setProgress(percent) {
      const offset = circumference - (percent / 100) * circumference;
      circle.style.strokeDashoffset = offset;
    };

setProgress(75);

.progress-ring__circle {
  transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 0.3s;
}

              <svg class="progress-ring" width="90" height="90">
                <defs>
                  <linearGradient id="MyGradient">
                    <stop offset="5%" stop-color="green" />
                    <stop offset="95%" stop-color="gold" />
                  </linearGradient>
                </defs>
                <circle
                  class="progress-ring__circle"
                  stroke="url(#MyGradient)"
                  stroke-width="10"
                  cx="45"
                  cy="45"
                  r="30"
                  fill="none"
                />
              </svg>

如何通过彩色圆形渐变动态填充svg圆？

0 个答案: