SVG沿圆形路径排列文字如何翻转上部文字实现正向显示

问题原因 #

你当前使用的圆形路径是顺时针绘制的，SVG文本默认会沿路径的切线方向排列，当路径运行到上半段时切线方向朝左，所以文字会出现倒置。

解决方案 #

你可以给上半段倒置的两个文本的<textPath>标签添加side="right"属性，让文字渲染在路径的另一侧，同时调整对应的偏移量即可实现正向显示。

修改后的完整代码如下：

<?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="-20" dx="420" >
        <textPath xlink:href="#textcircle" side="right">
            Dolor
        </textPath>
</text>
 <text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#00B831;" dy="-20" dx="90" >
        <textPath xlink:href="#textcircle" side="right">
            Sit amet
        </textPath>
</text>
</svg>

修改说明 #

• 给Dolor、Sit amet对应的<textPath>添加了side="right"属性，让文字沿路径反向排列解决倒置问题
• 将这两段文本的dy从35调整为-20，让文字位置上移匹配环形布局
• 调整了两段文本的dx值，匹配上半段的位置排布
• 如果需要兼容老旧浏览器，也可以额外绘制一条逆时针的上半圆路径，将倒置文本绑定到新路径上实现相同效果。

内容的提问来源于stack exchange，提问作者Xayris