将textPath方向从逆时针翻转到顺时针? [英] Flipping textPath direction from anti-clockwise to clockwise?

问题描述

默认情况下，SVG以逆时针方式将文本环绕在路径上.文字的顶部固定了路径.如何将方向更改为顺时针方向，以使文本的底部贴在圆周上而不是天花板上?

By default, SVG wraps text around a path in an anti-clockwise manner. The ceiling of the text sticks the path. How to change the direction to clockwise so that the floor of the text sticks to the circumference instead of the ceiling?

.textspace
{
	letter-spacing: 5px;
	font-family: fantasy;
	font-size: 50px;
	writing-mode: tb;
}

.curved-text
{
	font-family: fantasy;
	font-size: 20px;
	letter-spacing: 5px;
	word-spacing: 10px;
}

	<svg height="400" width="400">
		<defs>
			<path	d="M60,60
						A50,50
						0 
						1,0
						61,60"
						stroke="black"
						stroke-width="2"
						fill="none"
						id="tracker-path"/>
		</defs>
		<text x="50" y="50" class="curved-text">
			<textPath xlink:href="#tracker-path">
				Tracking succesful.
			</textPath>
		</text>
	</svg>

推荐答案

我设法解决了这个问题.您需要做的只是将 sweep-flag 的值从 0 设置为 1 .这将翻转 path

I managed to solve this. All you need to do is set the value of sweep-flag from 0 to 1. That will flip the direction of path

.textspace
{
	letter-spacing: 5px;
	font-family: fantasy;
	font-size: 50px;
	writing-mode: tb;
}

.curved-text
{
	font-family: fantasy;
	font-size: 20px;
	letter-spacing: 5px;
	word-spacing: 10px;
}

<svg height="400" width="400">
		<defs>
			<path	 d="M80,160
						A50,50
						0 
						1,1
						81,160"
						stroke="black"
						stroke-width="2"
						fill="none"
						id="tracker-path"/>
		</defs>
		<text x="50" y="50" class="curved-text">
			<textPath xlink:href="#tracker-path">
				Tracking succesful.
			</textPath>
		</text>
	</svg>

这篇关于将textPath方向从逆时针翻转到顺时针?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！