html - 圆形图像周围的圆形文本

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

这是我的解决方案。请注意，我已经为 textPath 颠倒了 #curve。此外，我已将图像移动到 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>