圆形文字周围的圆形文字

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的{​​{1}}颠倒了。另外，我已经将图像移到SVG内并用textPath进行了四舍五入。如果您需要使其具有响应能力，这很重要。

clipPath

svg{width:90vh;}