圆圈上的 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。

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

另外，我只使用第一个弧线，因为文本将落在这个弧线上。

我在这条弧线上添加了红色，stroke以便您可以看到它。您可以删除笔划属性。

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

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

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

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