gpt4 book ai didi

html - SVG 圆圈中的中心文本

转载 作者:太空宇宙 更新时间:2023-11-03 21:13:05 25 4
gpt4 key购买 nike

我已经检查了 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> .要使文本变白,您需要给它一个 strokefill#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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com