如何在SVG圆形中实现多行文本？尽量不使用CSS仅按需用style标签

嘿，我来帮你搞定这个问题～你原来的代码里用了HTML的<br>标签来换行，但SVG的<text>元素并不支持这个标签，所以换行效果完全不会生效。咱们可以用SVG原生的<tspan>标签来实现多行文本，而且完全不需要额外CSS，只用元素自身属性就能搞定。

修改后的代码 #

<svg height="300" width="300">
  <circle cx="150" cy="150" r="120" stroke="red" stroke-width="4" fill="#ffffff" />
  <text x="50%" y="50%" text-anchor="middle" stroke="#000000" stroke-width="1" dy=".3em">
    My code
    <tspan x="50%" dy="1.2em">isn't good</tspan>
  </text>
</svg>

关键说明 #

• 用<tspan>替代<br>：SVG的文本系统依赖<tspan>来实现多行、分段的文本内容，这是SVG原生支持的标准方式
• 保持水平居中：给每个<tspan>设置x="50%"，和父<text>的x属性一致，配合text-anchor="middle"就能让每一行都精准居中
• 控制行间距：dy属性用来调整行与行之间的距离，这里设置的1.2em是比较自然的行距，你可以根据需求改成更大或更小的值（比如1em或者1.5em）
• 无额外CSS：所有样式和布局都是通过元素自身的属性实现的，完全符合你“尽量不使用CSS”的要求

如果需要添加更多行，只需要继续添加<tspan>标签并设置对应的dy值就可以啦，比如：

<text x="50%" y="50%" text-anchor="middle" stroke="#000000" stroke-width="1" dy=".3em">
  My code
  <tspan x="50%" dy="1.2em">isn't good</tspan>
  <tspan x="50%" dy="1.2em">But now it works!</tspan>
</text>

内容的提问来源于stack exchange，提问作者Andrea P.