不修改path的d属性，如何翻转SVG的textPath文本？

现有代码如下：

body{
  padding-left:10rem;
}

<svg style="overflow:visible">
  <path id="path1" stroke="black" d="M 0 0 L -100 100" stroke-width="3" />
  <text font-size="24" dy="-10" text-anchor="middle">
    <textPath href="#path1"startOffset="50%">Hello there</textPath>
    <textPath href="#path1" startOffset="50%" dominant-baseline="central">➤</textPath>
  </text>
</svg>

需求：将文本翻转至指定对齐效果，但不修改path的d属性中的M与L参数。

解决方案1：用side="left"切换文本路径侧 #

直接给<textPath>添加side="left"属性，就能让文本跑到路径的另一侧显示，同时调整dy值修正位置：

<svg style="overflow:visible">
  <path id="path1" stroke="black" d="M 0 0 L -100 100" stroke-width="3" />
  <text font-size="24" dy="10" text-anchor="middle">
    <textPath href="#path1" startOffset="50%" side="left">Hello there</textPath>
    <textPath href="#path1" startOffset="50%" dominant-baseline="central" side="left">➤</textPath>
  </text>
</svg>

默认side值是right，改成left后文本会沿着路径的反向绘制，刚好实现翻转效果；把dy从-10改成10，是为了让文本回到路径附近的合适位置，避免偏移太远。

解决方案2：结合direction="rtl"精准控制 #

如果需要文本完全反向排列，再加上direction="rtl"（从右到左）属性：

<svg style="overflow:visible">
  <path id="path1" stroke="black" d="M 0 0 L -100 100" stroke-width="3" />
  <text font-size="24" dy="10" text-anchor="middle">
    <textPath href="#path1" startOffset="50%" side="left" direction="rtl">Hello there</textPath>
    <textPath href="#path1" startOffset="50%" dominant-baseline="central" side="left" direction="rtl">➤</textPath>
  </text>
</svg>

这个方法会让文本的字符顺序也反转，适合需要严格对齐路径反向的场景。

解决方案3：用transform单独翻转元素 #

要是只想针对个别文本翻转，可以给<textPath>加transform属性实现水平翻转，再用translate修正位置：

<svg style="overflow:visible">
  <path id="path1" stroke="black" d="M 0 0 L -100 100" stroke-width="3" />
  <text font-size="24" dy="-10" text-anchor="middle">
    <textPath href="#path1" startOffset="50%" transform="scale(-1,1) translate(-100,0)">Hello there</textPath>
    <textPath href="#path1" startOffset="50%" dominant-baseline="central" transform="scale(-1,1) translate(-100,0)">➤</textPath>
  </text>
</svg>

scale(-1,1)实现水平翻转，translate(-100,0)是为了抵消翻转后产生的位置偏移，保证文本还在路径的正确位置上。

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