Question

我已经检查了StackOverflow中提供的不同解决方案，因为这样的问题无济于事。对于我的生活，我不知道什么不起作用。

您可能想知道＆＃34;为什么要使用SVG＆＃34;。我必须在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;
    }

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

Answer 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>

希望这有帮助！：）

Answer 2

此处y的{{1}}位置在很大程度上取决于text属性。

＆＃13;

font-size

＆＃13;

SVG圈中的中心文字

2 个答案: