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>

图表原本分为三个，因为我无法解决它，我想到只为第二个和最后一个路径设置相同的颜色..渐变也不是很好..而且我无法轻易改变＆＃34;百分比＆＃34;图表。

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 * circumference。在这里，circumference约为1256（2 *半径= 200 * pi）。

修改

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

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

使用SVG的甜甜圈图

1 个答案: