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

Question

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

3

我正在一个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>

- Xayris

你可以分享一下你的 CSS 吗？ - aloisdg

每个文本都有行内CSS。没有额外的CSS。 - Xayris

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- enxaneta · Accepted Answer

为此，您需要改变路径的方向。在这种情况下，我使用了一个新路径：

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

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

您的代码：d="M56,256a200,200 0 1,0 400,0 ... 我的代码：d="M56,256a200,200 0 1,1 400,0"

此外，我仅使用第一个弧，因为文本将出现在该弧上。

我向此弧添加了红色的描边，以便您可以看到它。您可以删除描边属性。

还有一点需要注意的是，为了在路径上的某个点放置文本，可以使用startOffset属性。

我保留了您的dy属性，但是我也可以将圆的半径从200更改为210（例如）。

另外，请注意我使用了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>