javascript - 使用 SVG 的圆环图

Question

我需要复制这个圆环图:

我看到了this问题并使用了给出的解决方案，但由于我在 SVG 方面没有任何经验，因此我无法取得良好的进展。但这显示了我到目前为止所做的事情。 (link here to fiddle)

<svg width="600" height="600">
    <defs>
        <mask id="innerbevel">
            <rect width="100%" height="100%" fill="black"/>
            <circle cx="0" cy="0" r="235" fill="white"/>
        </mask>

        <mask id="centrehole">
            <rect x="-100%" y="-100%" width="200%" height="200%" fill="white"/>
            <circle cx="0" cy="0" r="195" fill="black"/>
        </mask>

        <linearGradient id="grad1">
            <stop offset="0%" stop-color="#2188cb"/>
            <stop offset="100%" stop-color="##2188cb" stop-opacity="0" />
            </linearGradient>
    </defs>

    <g transform="translate(300,300)" mask="url(#centrehole)">
        <g>
            <path d="M0 0 0 -275 A 275 275 0 0 1 0 275" fill="url(#grad1)"/>
            <path d="M0 0 0 275 A 275 275 0 0 1 -275 0" fill="#a6a6a6"/>
            <path d="M0 0 -275 0 A 275 275 0 0 1 0 -275" fill="#a6a6a6"/>

            <circle cx="0" cy="235" r="40" fill="#2188cb"/>
            <circle cx="-235" cy="0" r="40" fill="#a6a6a6"/>
            <circle cx="0" cy="-235" r="40" fill="#a6a6a6"/>
        </g>
    </g>
</svg>

该图最初分为三部分，因为我无法解决它，所以我考虑为第二条也是最后一条路径设置相同的颜色..渐变也不是很好..而且我不能轻松更改图表的“百分比”。

PS:文本只是一个虚拟文本，我知道它不是图像上的 75%。是的，我的工作一团糟。

有人帮忙吗？

编辑: 问题是如何使其只有两条具有最接近划分的路径，就像我正在复制的图像一样？我不太明白路径是如何设置的，以及如何正确设置渐变以遵循路径，因为现在它是线性的。

Answer 1

一个更简单的版本:

<svg width="500" height="500">
  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#05a"/>
      <stop offset="100%" stop-color="#0a5"/>
    </linearGradient>
  </defs>
  <circle cx="250" cy="250" r="200" stroke="grey" stroke-width="50" fill="none"/>
  <path d="M 250,50 A 200 200 0 1 1 250 450 A 200 200 0 1 1 250 50"
        stroke="url(#linear)" stroke-linecap="round" stroke-width="50"
        fill="none" stroke-dasharray="750,1256" />
</svg>

jsFiddle:https://jsfiddle.net/jacquesc/ywus1z14/2/

唯一需要改变以使其“增长”的是Stroke-dasharray的第一个值，它应该是x * Peripheral。这里，周长约为 1256 (2 * radius=200 * pi)。

编辑

只是为了好玩，另一个版本使用了 Stroke-dasharray 和 Stroke-dashoffset 的组合，通过 CSS 设置和动画:

https://jsfiddle.net/jacquesc/ywus1z14/1/