更改 CSS SVG 中文本的方向答案

【问题标题】：Change the direction of text in CSS SVG更改 CSS SVG 中文本的方向
【发布时间】：2021-01-16 18:26:55
【问题描述】：

我有以下 SVG 代码：https://jsfiddle.net/danpan/m3ofzrc1/ 生成吹气图像。

有两行文字——围绕一个圆圈：

HELLO_WORLD_1

HELLO_WORLD_2

如何将“HELLO_WORLD_2”这一行的方向更改为顺时针？

<svg width="132" height="132">
  <defs>
    <path id="text-path" d="M66 126A60 60 0 1 0 66 6a60 60 0 0 0 0 120" fill="none"/>
  </defs>

  <text>
    <textPath xlink:href="#text-path" font-family="Manrope3-ExtraBold, Manrope3" font-size="10" font-weight="600" fill="#001A62" letter-spacing="3.14">HELLO_WORLD_1 * HELLO_WORLD_2</textPath>
</text>
</svg>

【问题讨论】：

使用 Firefox，您可以只使用 side 属性，例如side="right" 但我认为 Chrome/Safari 还没有实现 side。

标签： html css svg css-animations

【解决方案1】：

试试这个：

<path id="text-path" d="M66 126A60 60 0 1 1 66 6a60 60 0 0 1 0 120" fill="none"/>

参考： Flipping textPath direction from anti-clockwise to clockwise?

【讨论】：

谢谢。但是，它翻转了整个文本；我只想翻转一行（文本的一半）

【解决方案2】：

简答：
要解决这个问题，您需要将文本和路径分成两部分。文本的顶部将遵循顶部路径。文字的下部，分别沿着下部路径。

<svg width="150" height="150" viewBox="-10 -10 150 150" >
    <!--  sweep-flag="1" Clockwise text direction -->
   <path id="top-path"  d="M6 66A60 60 0 1 1 126 66" fill="none" stroke="red"/>
  <!--  sweep-flag="0" Counterclockwise text direction -->
<path  id="bottom-path" d="M6 66A60 60 0 1 0 126 66" fill="none" stroke="blue"/>
 </svg>

文本的两半将从坐标M6 66的同一点开始并在同一点126 66结束但文本的上半部分将顺时针方向sweep-flag = "1"文本的下半部分是逆时针方向@ 987654328@

<svg width="150" height="150" viewBox="-10 -10 150 150" >
  <defs> 
          <!--  sweep-flag="1" Clockwise text direction -->
   <path id="top-path"  d="M6 66A60 60 0 1 1 126 66" fill="none" />
           <!--  sweep-flag="0" Counterclockwise text direction -->
<path  id="bottom-path" d="M6 66A60 60 0 1 0 126 66" fill="none" />
  </defs>
  <text dx="30" dy="-2">
    <textPath xlink:href="#top-path" font-family="Manrope3-ExtraBold, Manrope3" font-size="10" font-weight="600" fill="#001A62" letter-spacing="3.14">HELLO_WORLD_1 </textPath>
</text> 
 <text dx="20" dy="10">
    <textPath xlink:href="#bottom-path" font-family="Manrope3-ExtraBold, Manrope3" font-size="10" font-weight="600" fill="#001A62" letter-spacing="3.14">* HELLO_WORLD_2</textPath>
</text> 
</svg>

Tl;博士

文本将位于从其起点（Arc start）到终点（Arc end）的弧线上但是从起点到终点要走什么路径——弧结束，取决于参数
large-arc-flag和sweep-flag

您的文本排列变体 - 底行红线

9.3.8. The elliptical arc curve commands

<path d="M6 66A60 60 0 1 1 126 66" /> 
<path d="M mx,my A rx,ry x-axis-rotation large-arc-flag, sweep-flag x,y" />  , where

M mx,my - 椭圆弧起点坐标
A rx, ry - 椭圆弧半径
x-axis-rotation - 椭圆相对于当前坐标系的x轴旋转x-axis-rotation度数
large-arc-flag - 实现大部分弧的输出的参数，如果（= 1）或更少（= 0）
sweep-flag - 实现从起点到终点绘制圆弧的方向。如果 sweep-flag = 1，则椭圆弧将顺时针绘制。使用扫描标志 = 0 - 逆时针。
x,y - 椭圆弧的终点坐标

【讨论】：