HTML 圈中有多条线？

Question

我想在没有 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="1px" dy=".3em">My code<br/>isn't good</text>
</svg>

谢谢！

Answer 1

这是我能做的最好的了。它可以工作，但它是硬编码的，这显然并不理想。我看了另一个 post 顺便说一句，可能会有一些帮助：How to linebreak an svg text within javascript?

<svg height="300" width="300">
    <circle cx="150" cy="150" r="120" stroke="red" stroke-width=4 fill="#ffffff" />
    <text text-anchor="middle" stroke="#000000" stroke-width="1px" dy=".3em">

    <tspan x="50%" y="40%" dy="1.2em">very long text</tspan>
    <tspan x="50%" y="50%" dy="1.2em">I would like to linebreak</tspan>
    </text>
</svg>

HTML 圈中有多条线？

Multiple lines in HTML circle?

html

geometry

lines