如何使用百分比值部分填充svg路径?

时间:2019-01-09 06:49:46

标签: html5 svg sunburst-diagram

我已经使用了link中的代码来实现朝阳设计。 下面是svg路径元素,它是一个弧。

<g class="node" style="opacity: 1;"><path id="Arc_12" d="M-216.50635094610962,125.00000000000009A250,250,0,0,1,-4.5924254968025744e-14,-250L-3.6739403974420595e-14,-200A200,200,0,0,0,-173.2050807568877,100.00000000000007Z" style="stroke: rgb(255, 255, 255); fill: rgb(20, 76, 76);"></path><text style="font-size: 12px; fill: white; text-transform: full-width;" dx="0" dy="27"><textPath startOffset="25%" style="dominant-baseline: middle; text-anchor: middle;" xlink:href="#Arc_12">COMPLETED 75%</textPath></text></g>

以上元素当前填充有rgb(20,76,76),它占路径的100%。我只需要填写路径的75%即可指示进度。预先感谢。

0 个答案:

没有答案