将文本添加到Angular SVG圆形进度条

Question

所以我正在使用Cris Beto的Angular SVG圆形进度条来...创建一个圆形进度条。无论如何，我想在它的中心添加文本，就像demo一样。我尝试在div之间添加文本，也尝试进入演示页面上的源代码，试图弄清楚它，但我还没能弄清楚。

我基本上完全遵循了他的指导，以获得一个带动画的工作条形图。有什么想法吗？

以防万一，下面是我的HTML：

        <div id="circleGraph" class="container-fluid">
        <div
            round-progress
            max="200"
            current="100"
            color="#45ccce"
            bgcolor="#eaeaea"
            radius="100"
            stroke="30"
            semi="false"
            rounded="true"
            clockwise="true"
            responsive="false"
            duration="800"
            animation="easeInOutQuart">
        </div>
    </div>

Answer 1

这是我在我的项目中实现它的方式：

<div class="positionRelative">

    <round-progress
        max="100"
        current="[[myValue.percentage]]"
        color="#4AB7EC"
        bgcolor="#56606B"
        radius="35"
        stroke="5"
        semi="false"
        rounded="false"
        clockwise="true"
        responsive="false"
        duration="800"
        animation="easeInOutQuart"
        animation-delay="0"></round-progress>

        <div class="percentageValue">
            20 % // text that comes in cetner
        </div>

</div>

和CSS：

.positionRelative{
    position: relative;

}

.percentageValue {
    left: 10px;
    top: 40%;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

Answer 2

这可能是晚了一天，少了一美元，但它也难倒了我，直到我进一步挖掘。他们是这样做的.这是我的实现：

<style>
.progress-percentage-wrapper {
    position: relative;
    margin: 20px auto;
    font-size: 50px;
    width: 200px;
    height: 200px;
}
.progress-percentage {
    position: absolute;
    color: #bbb;
    width: 100%;
    text-align: center !important;
    top: 35%;
}
</style>

<div class="progress-percentage-wrapper">
        <div class="progress-percentage ng-cloak">{{vm.percentageOfGoal | percentage:0}}</div>
            <round-progress max="1"
                        current="vm.percentageOfGoal"
                        color="#45ccce"
                        bgcolor="#eaeaea"
                        radius="100"
                        stroke="20"
                        semi="false"
                        rounded="false"
                        clockwise="true"
                        responsive="false"
                        duration="1000"
                        animation="easeInOutQuart"
                        animation-delay="500"></round-progress>
        </div>
    </div>