Here's a concise solution:
To resolve this issue, you must separate the text and path into two sections. The upper portion of the text will adhere to the top path, while the lower section of the text will align with the bottom path.
<svg width="150" height="150" viewBox="-10 -10 150 150">
<!-- sweep-flag="1" indicates Clockwise text direction -->
<path id="top-path" d="M6 66A60 60 0 1 1 126 66" fill="none" stroke="red"/>
<!-- sweep-flag="0" implies Counterclockwise text direction -->
<path id="bottom-path" d="M6 66A60 60 0 1 0 126 66" fill="none" stroke="blue"/>
</svg>
The text segments both commence from coordinate point M6 66
and conclude at point 126 66
. However, the upper segment travels in a clockwise direction with sweep-flag = "1"
, while the lower segment moves counterclockwise with sweep-flag = "0"
.
<svg width="150" height="150" viewBox="-10 -10 150 150">
<defs>
<!-- sweep-flag="1" signifies Clockwise text direction -->
<path id="top-path" d="M6 66A60 60 0 1 1 126 66" fill="none" />
<!-- sweep-flag="0" represents 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>
In summary
The text will follow an arc from its starting point (Arc start) to the end point (Arc end). The specific path it takes from start to finish depends on the large-arc-flag and sweep-flag parameters.
Your selected text layout option - the red line at the bottom row
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 – coordinates of the ellipse arc's starting point
- A rx, ry - radii of the ellipse arc
- x-axis-rotation – rotation angle of the ellipse relative to the current coordinate system's x-axis
- large-arc-flag - determines whether most of the arc should be rendered (= 1) or not (= 0)
- sweep-flag - dictates the arc drawing direction from start to end. With sweep-flag = 1, the arc is drawn clockwise; with sweep-flag = 0, it's counterclockwise.
- x,y – coordinates of the ellipse arc's end point