Добавить текст поверх ar c svg

Question

SVG вопрос никому !!! Пожалуйста, помогите!

Я создал круг из трех дуг, используя три тега svg circle. Я хочу отображать текст в центре вверху каждого ar c. Длина ar c равна Dynami c, но текст для этого ar c всегда должен быть в центре вверху этого ar c. Что-то вроде кольцевой диаграммы

.

<div class="doughnut">
    <svg width="100%" height="100%" viewBox="0 0 100 100">
        <g>
            <circle
                cx="50"
                cy="50"
                r="30"
                id="one"
                stroke="#BE007C"
                fill="none"
                stroke-dasharray="188.496"
                stroke-dashoffset=${this.chartOffset()[0].strokeDashOffset}
                transform=${this.chartOffset()[0].rotation}
            />
            <text
                fill="black"
                font-size="7"
                transform="translate(50,90)">
                Red
            </text>
        </g>
        <g>
            <circle
                cx="50"
                cy="50"
                r="30"
                id="two"
                stroke="#003DA7"
                fill="none"
                stroke-dasharray="188.496"
                stroke-dashoffset=${this.chartOffset()[1].strokeDashOffset}
                transform=${this.chartOffset()[1].rotation}
            />
            <text
                x="1"
                y="1"
                fill="black"
                font-size="7">
                Blue
            </text>
        </g>
        <g>
            <circle
                cx="50"
                cy="50"
                r="30"
                id="three"
                stroke="#48B971"
                fill="none"
                stroke-dasharray="188.496"
                stroke-dashoffset=${this.chartOffset()[2].strokeDashOffset}
                transform=${this.chartOffset()[2].rotation}
            />
            <text
                x=${this.textDirection(-336).x}
                y=${this.textDirection(-336).y}
                fill="black"
                font-size="7">
                Green
            </text>
        </g>
    </svg>
</div>