SVG圆圈中的中心文本答案

【问题标题】：center text in SVG circleSVG圆圈中的中心文本
【发布时间】：2017-06-26 07:46:36
【问题描述】：

我已经检查了 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;
    }

它是一个棕色的小圆圈，应该有两行文字，居中，白色。

【问题讨论】：

你需要多于2行吗？
不，只有两个。我应该在第一行有一个词，在第二行有另一个词，都居中。
让我看看

标签： html css svg

【解决方案1】：

要使您的文本跨越多行，您需要使用<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>

希望这会有所帮助！ :)

【讨论】：

好一个。您可能希望使用fill="#fff" 而不是笔画，以使文本更清晰...
更新为使用fill :)
天哪，这就像一个魅力！非常感谢你。我的问题是：为什么在 Y 轴上是 30% 而不是 50%——我认为这是最合乎逻辑的事情？
因为你有两行文字。我本可以使用 50%，但这会使第一行正好位于中间，而第二行则相当低。我将其向上移动以使两条线的显示更具吸引力，尽管可以随意调整以适应:)
@ObsidianAge 如果您有多个圆圈并且想要在每个圆圈中居中显示文本怎么办？我需要额外的<svg> 元素吗？ <svg width="200" height="100"> <circle cx="40" cy="40" r="40" fill="#472e12" /> <circle cx="120" cy="40" r="40" fill="#472e12" /> <text x="50%" y="30%" text-anchor="middle" fill="#fff" dy=".3em"> </text> // how to add centered text to the second circle? </svg>

【解决方案2】：

这里text 的y 位置很大程度上取决于font-size 属性。

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="40" cy="40" r="40" fill="#472e12" />
    <text x="40" y="40" fill="#FFF" font-size="20px" text-anchor="middle"  >
      1 line
    </text>
    <text x="40" y="60" fill="#FFF" font-size="20px" text-anchor="middle">
      2 line
    </text>
</svg>

【讨论】：

这也有效！谢谢你，兄弟。我认为foreignObject杀了我哈哈
没问题，只要能帮到你我就开心