尝试使用 SVG 绘制一个圆圈，该圆圈适用于 Firefox，但在实际项目中不起作用答案

【问题标题】：Tried drawing a circle using SVG which works for Firefox from a proof of concept but doesn't work in actual project尝试使用 SVG 绘制一个圆圈，该圆圈适用于 Firefox，但在实际项目中不起作用
【发布时间】：2021-08-03 12:59:10
【问题描述】：

这是我用于概念证明 (POC) 和我的实际项目的 HTML 和 JS。这在 Firefox for POC 中可以正常工作，但在实际项目中却不行。我只是在检查时看到一个方形元素。

<div class="percent-container">
    <div class="percent-text">90%</div>
    <svg class="progress-ring" width="100%" height="100%">
        <circle class="fake-ring" stroke="#008D00" stroke-width="3" fill="transparent" r="43%" cx="50%" cy="50%"/>
        <circle class="progress-ring__circle" stroke="#FFFFFF" stroke-width="3" fill="transparent" r="43%" cx="50%" cy="50%"/>
    </svg>
</div>

function setProgress(circleClass, percent) {
            var circle = document.getElementsByClassName(circleClass);
            var radius = 22;
            var circumference = radius * 2 * Math.PI;
            circle[0].style.strokeDasharray = `${circumference} ${circumference}`;
            circle[0].style.strokeDashoffset = `${circumference}`;
            const offset = circumference - percent / 100 * circumference;
            circle[0].style.strokeDashoffset = offset;
}
setProgress("fake-ring",100);
setProgress("progress-ring__circle",70);

【问题讨论】：

欢迎来到 Stack Overflow！请使用minimal reproducible example 更新您的问题。
另外你是什么意思它在“概念证明”（？）中有效但在项目中无效？这两种情况在环境上有什么区别？
您是否尝试将viewBox 属性添加到您的<svg> 元素？

标签： javascript html svg

【解决方案1】：

我将getElementsByClassName() 更改为querySelector()。那么circle不是数组，而是你需要的元素。

对我来说，它看起来很有效，但我真的不知道如果两个圆圈相互重叠，以及那个 dacharray 的样式，你会实现什么。

而且尺寸有点偏。我将 viewBox 属性添加到 <svg> 并给它一个宽度，以便它适合这个 sn-p 视图。

function setProgress(circleClass, percent) {
  var circle = document.querySelector(`.${circleClass}`);
  var radius = 22;
  var circumference = radius * 2 * Math.PI;
  circle.style.strokeDasharray = `${circumference} ${circumference}`;
  circle.style.strokeDashoffset = `${circumference}`;
  const offset = circumference - percent / 100 * circumference;
  circle.style.strokeDashoffset = offset;
}

setProgress("fake-ring",100);
setProgress("progress-ring__circle",70);

<div class="percent-container">
  <div class="percent-text">90%</div>
  <svg class="progress-ring" viewBox="0 0 100 100" width="200px">
        <circle class="fake-ring" stroke="#008D00" stroke-width="3" fill="transparent" r="43%" cx="50%" cy="50%"/>
        <circle class="progress-ring__circle" stroke="#FFFFFF" stroke-width="3" fill="transparent" r="43%" cx="50%" cy="50%"/>
    </svg>
</div>

【讨论】：