css - 圆圈上的 SVG 文本 - 更改文本方向

Question

我在 SVG 中沿着圆形路径添加文本。我设法做到了，但我需要“翻转”上面的文本。

“Sit amet”和“Dolor”需要像“Lorem”和“Ipsum”一样直接显示。如何实现？

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#EFEFEF;" d="M0,256a256,256 0 1,0 512,0a256,256 0 1,0 -512,0"/>
<path id="textcircle" style="fill:#FAFAFA;" d="M56,256a200,200 0 1,0 400,0a200,200 0 1,0 -400,0"/>
<text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FFAD01;" dy="35" dx="90" >
        <textPath xlink:href="#textcircle">
            Lorem
        </textPath>
</text>
<text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FF7101;" dy="35" dx="420" >
        <textPath xlink:href="#textcircle">
            Ipsum
        </textPath>
</text>
 <text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#B6957A;" dy="35" dx="760" >
        <textPath xlink:href="#textcircle">
            Dolor
        </textPath>
</text>
 <text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#00B831;" dy="35" dx="1020" >
        <textPath xlink:href="#textcircle">
            Sit amet
        </textPath>
</text>
</svg>

Answer 1

为此，您需要更改路径的方向。在本例中，我使用了一条新路径:

<path id="textcircle1" stroke="red" fill="none" d="M56,256a200,200 0 1,1 400,0" />

请注意，我已将弧的第 5 个参数更改为 1。

your code: d="M56,256a200,200 0 1,0 400,0 ...
my code: d="M56,256a200,200 0 1,1 400,0"

此外，我只使用第一个圆弧，因为文本会落在这个圆弧上。

我已将红色的 stroke 添加到此弧线中，以便您可以看到它。您可以删除 stroke 属性。

还有一个观察结果是，为了将文本放在路径上的某个特定点，您可以使用 startOffset 属性。

我保留了您的 dy 属性，但我可以将圆的半径从 200 更改为 210(例如)而不是使用 dy。

此外:请注意我正在使用 text-anchor="middle" 属性。在这种情况下，呈现的字符对齐，使得文本字符串的中间位于当前文本位置。这允许我使用 startOffset="80%" 和 startOffset="20%" 精确地设置文本的位置，即在文本的每一端的 20%小路。如果您不想使用 text-anchor="middle"，您可以将其删除。

<svg viewBox="0 0 512 512">
  <path style="fill:#EFEFEF;" d="M0,256a256,256 0 1,0 512,0a256,256 0 1,0 -512,0" />
  <path id="textcircle" style="fill:#FAFAFA;" d="M56,256a200,200 0 1,0 400,0a200,200 0 1,0 -400,0" />

  <path id="textcircle1" stroke="red" fill="none" d="M56,256a200,200 0 1,1 400,0" />

  <text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FFAD01;" dy="35" dx="90">
    <textPath xlink:href="#textcircle">
      Lorem
    </textPath>
  </text>
  <text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FF7101;" dy="35" dx="420">
    <textPath xlink:href="#textcircle">
      Ipsum
    </textPath>
  </text>

  <g style="font-family: sans-serif; font-weight: 900; font-size:1.2em;" text-anchor="middle">
    <text fill="#B957A" dy="-10">
      <textPath startOffset="80%" xlink:href="#textcircle1">
        Dolor
      </textPath>
    </text>
    <text style="fill:#00B831;" dy="-10">
      <textPath xlink:href="#textcircle1" startOffset="20%">
        Sit amet
      </textPath>
    </text>
</svg>