Круговой текст вокруг изображения круга

Question

Контекст:

Порядок ввода текста пути SVG поверх изображения круга.
Квадратное изображение округляется с использованием rounded-circle.Вокруг него рисуется путь SVG, который используется для написания текста.В результате:

Код: https://jsfiddle.net/ghLn4jkt/

<div class="mt-3 row">
    <div class="col-9 CircleThing" style="background-color: coral;">
        <img src="https://via.placeholder.com/500/" alt="contact" class="rounded-circle">
        <svg width="600" height="600">
            <!--Base circle for the text-->
            <!--<circle id="curve" cx="270" cy="270" r="260" stroke="black" stroke-width="3" fill="red" />--> 
            <path id="curve" fill="transparent"
                  d="M 10, 270        
                  a 260,260 0 1,0 520,0
                  a 260,260 0 1,0 -520,0 " />
            <text width="520">
                <textPath xlink:href="#curve"  >
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </textPath>
            </text>
        </svg>
    </div>
</div>

Css:

 .CircleThing {
  font-family: Gill Sans Extrabold;
  font-size: 50px;
}

Проблема:

В моей последней попытке у меня есть несколько вопросов:
1 /.Svg не находится сверху img.
2 /.Текст начинается в левом нижнем углу, а я хочу, чтобы он был справа.Чтобы создать путь, я сначала сделал SVG-круг и после прочтения https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d определил его путь:

M cx, cy
a r,r 0 1,0 (r * 2),0
a r,r 0 1,0 -(r * 2),0

3 /.Текст вверх ногами или наизнанку.за верхний правый квадрат

Answer 1

Это моё решение.Обратите внимание, что я изменил #curve для textPath.Также я переместил изображение внутри SVG и округлил до clipPath.Это важно, если вам нужно сделать его отзывчивым.

svg{width:90vh;}

<div class="mt-3 row">
  <div class="col-9 CircleThing" style="background-color: coral;">
    <svg viewBox="-30 -30 600 600" style="background-color: black;">
<defs>
<path id="curve" d="M 10, 270 a 260,260 0 1,1 520,0 a 260,260 0 1,1 -520,0 " />
<clipPath id="clip">
<path d="M 40, 270a 230,230 0 1,0 460,0a 230,230 0 1,0 -460,0 " />
</clipPath>
</defs>
				 
<image xlink:href="https://via.placeholder.com/500/" clip-path="url(#clip)"/>
          
<text fill="white" font-size="40">
<textPath xlink:href="#curve" >
    some words
</textPath>
</text>
</svg>
  </div>
</div>