我已经检查了 StackOverflow 中提供的不同解决方案，以解决此类问题，但无济于事。对于我的生活，我不知道什么是行不通的。
您可能想知道“为什么要使用 SVG”。我必须在 HTML 中创建一个圆圈并将其放置在横幅上，这是给客户的。我发现创建 SVG 形状是我创建这种圆的最佳方式。这是我当前的 SVG:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="#472e12" />
<foreignobject x="20" y="20" width="20" height="20">
<style>
p { text-anchor:middle;}
</style>
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<p>Text in two lines</p>
</div>
</body>
</foreignobject>
</svg>
这是它的 CSS:
svg{
position: absolute;
left: 20px;
bottom: 40px;
}
它是一个棕色的小圆圈，应该有两行居中的白色文本。
最佳答案
要使您的文本跨越多行，您需要使用 <tspan> .要使文本变白，您需要给它一个 stroke或 fill的 #fff .我去了fill使它更清晰。至于文本本身，您可能会发现使用 <text> 更容易。 ，并执行类似以下操作:
<svg width="200" height="100">
<circle cx="40" cy="40" r="40" fill="#472e12" />
<text x="50%" y="30%" text-anchor="middle" fill="#fff" dy=".3em">
<tspan x="20%" dy=".6em">Text In</tspan>
<tspan x="20%" dy="1.2em">Two Lines</tspan>
</text>
</svg>希望对您有所帮助! :)
关于html - SVG 圆圈中的中心文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44751201/