时间戳

首页 > 解决方案 > 更改 CSS SVG 中文本的方向

html - 更改 CSS SVG 中文本的方向

问题描述

我有以下 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>

标签： htmlcsssvgcss-animations

解决方案

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

<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"的下部是逆时针方向 sweep-flag = "0"

<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和扫旗

在此处输入图像描述

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

9.3.8。椭圆弧曲线命令

<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 – 椭圆弧终点的坐标

推荐阅读