创建双圈进度表

Question

我想创建一个双圈进度条，但没有任何额外的库。所以我找到了一个使用SVG并创建一个更大和一个更小的圆的解决方案，然后将较小的一个放在较大的一个中间。但是现在，我不知道为什么内圈与外圈的宽度不同，所以我该如何解决呢？ 它应该看起来像

到目前为止我得到的是：https://jsfiddle.net/equalsound/mf2Lpeeb/2/

namespace Arry
{

   class Program
   {
      static void Main(string[] args)
      {

        IWebDriver driver = null;
        driver = new ChromeDriver();

        driver.Navigate().GoToUrl("https://www.google.com/");

        IList<IWebElement> links = driver.FindElements(By.TagName("a"));
         IList<IWebElement> values = driver.FindElements(By.TagName("href"));
        IWebElement[,] res = new IWebElement[links.Count,values.Count];





            foreach (IWebElement link in res)
            {
                Console.WriteLine(link.Text);                
            }               

        Console.Read();            
      }
    }
 }

如果我在这里遗失了一些非常明显的事情，我很抱歉，但我以前从未使用过svg。

Answer 1

您正在同一SVG坐标空间和同一视口区域中创建圆，但包含内圆的元素的像素大小较小。这使得一切都变小，这使得圆圈达到你想要的尺寸，但也使得笔划看起来更窄。

Answer 2

只做改变半径而不通过css改变它。例如，

<svg id="leftSidebarAssistantOuterCircle" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 34 34">
<circle cx="16" cy="16" r="10.9155" class="progress-bar__background"></circle>
<circle cx="16" cy="16" r="10.9155" class="progress-bar__progress js-progress-bar" style="stroke-dashoffset: 50px;"></circle>

这里，r是仅被改变的参数。从较小的圆圈中移除css的宽度和高度，并从值r减小半径。